本地化 (i18n)
BlockNote 设计支持完全本地化，支持多种语言。您可以轻松更改编辑器语言或创建自定义翻译。
支持的语言
BlockNote 开箱即用支持以下语言：
- 阿拉伯语 (
ar) - العربية - 简体中文 (
zh) - 中文 - 繁体中文 (
zh-tw) - 繁體中文 - 克罗地亚语 (
hr) - Hrvatski - 荷兰语 (
nl) - Nederlands - 英语 (
en) - English - 法语 (
fr) - Français - 德语 (
de) - Deutsch - 希伯来语 (
he) - עברית - 冰岛语 (
is) - Íslenska - 意大利语 (
it) - Italiano - 日语 (
ja) - 日本語 - 韩语 (
ko) - 한국어 - 挪威语 (
no) - Norsk - 波兰语 (
pl) - Polski - 葡萄牙语 (
pt) - Português - 俄语 (
ru) - Русский - 斯洛伐克语 (
sk) - Slovenčina - 西班牙语 (
es) - Español - 乌克兰语 (
uk) - Українська - 乌兹别克语 (
uz) - O'zbekcha - 越南语 (
vi) - Tiếng Việt
基本用法
要使用不同语言，导入所需语言包并传递给 dictionary 选项：
import { useCreateBlockNote, BlockNoteView } from "@blocknote/react";
import { fr } from "@blocknote/core/locales";
function FrenchEditor() {
const editor = useCreateBlockNote({
dictionary: fr,
});
return <BlockNoteView editor={editor} />;
}动态切换语言
您可以根据用户偏好或应用的语言环境动态更改语言：
import { useCreateBlockNote, BlockNoteView } from "@blocknote/react";
import * as locales from "@blocknote/core/locales";
function LocalizedEditor({ language = "en" }) {
const editor = useCreateBlockNote({
dictionary: locales[language as keyof typeof locales] || locales.en,
});
return <BlockNoteView editor={editor} />;
}
// 使用示例
<LocalizedEditor language="fr" />
<LocalizedEditor language="de" />
<LocalizedEditor language="ja" />自定义文本字符串
您可以通过扩展现有字典来自定义特定文本字符串：
import { useCreateBlockNote, BlockNoteView } from "@blocknote/react";
import { en } from "@blocknote/core/locales";
function CustomEditor() {
const editor = useCreateBlockNote({
dictionary: {
...en,
placeholders: {
...en.placeholders,
default: "开始输入您的故事...",
heading: "在此输入标题",
emptyDocument: "开始您的文档",
},
slash_menu: {
...en.slash_menu,
paragraph: {
...en.slash_menu.paragraph,
title: "文本块",
subtext: "常规文本内容",
},
},
},
});
return <BlockNoteView editor={editor} />;
}字典结构
字典对象包含编辑器各部分的翻译：
占位符
块为空时显示的文本：
placeholders: {
default: "输入文本或键入 '/' 命令",
heading: "标题",
bulletListItem: "列表",
numberedListItem: "列表",
checkListItem: "列表",
new_comment: "写评论...",
edit_comment: "编辑评论...",
comment_reply: "添加评论...",
}斜杠菜单
输入 / 时出现的命令：
slash_menu: {
paragraph: {
title: "段落",
subtext: "文档主体内容",
aliases: ["p", "paragraph"],
group: "基本块",
},
heading: {
title: "一级标题",
subtext: "顶级标题",
aliases: ["h", "heading1", "h1"],
group: "标题",
},
// ... 更多菜单项
}界面元素
按钮、菜单及其他界面元素的文本：
side_menu: {
add_block_label: "添加块",
drag_handle_label: "打开块菜单",
},
table_handle: {
delete_column_menuitem: "删除列",
add_left_menuitem: "左侧添加列",
// ... 更多表格选项
},
color_picker: {
text_title: "文字",
background_title: "背景",
colors: {
default: "默认",
gray: "灰色",
// ... 更多颜色
},
}与 i18n 库集成
您可以将 BlockNote 与流行的 i18n 库如 react-i18next 或 next-intl 集成：
import { useCreateBlockNote, BlockNoteView } from "@blocknote/react";
import { useTranslation } from "react-i18next";
import * as locales from "@blocknote/core/locales";
function I18nEditor() {
const { i18n } = useTranslation();
const editor = useCreateBlockNote({
dictionary: locales[i18n.language as keyof typeof locales] || locales.en,
});
return <BlockNoteView editor={editor} />;
}添加新语言
要添加对新语言的支持，您可以：
- 提交 Pull Request 到 BlockNote 仓库，贡献您的翻译
- 在您的应用中创建自定义字典 立即使用
创建翻译时，请确保：
- 翻译字典中的所有文本字符串
- 保持与英文字典相同的结构
- 用不同内容类型测试翻译效果
- 考虑界面文本的文化差异