从零参与wangEditor 5国际化：3步完成i18n翻译贡献指南

从零参与wangEditor 5国际化：3步完成i18n翻译贡献指南

【免费下载链接】wangEditor 项目地址: https://gitcode.com/gh_mirrors/wan/wangEditor

你是否曾因编辑器界面语言不通而困扰？作为一款开源富文本编辑器，wangEditor需要全球开发者共同完善多语言支持。本文将带你3步掌握国际化翻译流程，轻松成为wangEditor多语言贡献者，让全球用户都能用上母语版编辑器。

为什么参与翻译？

wangEditor 5作为国内优秀的开源编辑器，已被广泛应用于各类Web项目。目前项目已支持中英文切换，但仍有更多语言等待拓展。参与翻译不仅能提升全球用户体验，还能：

• 获得开源社区贡献者身份
• 提升国际化项目协作经验
• 帮助非中文用户顺利使用编辑器

项目国际化核心模块位于packages/core/src/i18n/，通过i18next实现多语言切换，所有翻译文件采用TypeScript模块化管理，结构清晰易于维护。

翻译文件结构解析

wangEditor的国际化文件分散在多个核心模块中，主要包括三大组件：

模块路径	功能说明	翻译内容
packages/editor/src/locale/	编辑器主界面	工具栏、菜单标签等
packages/basic-modules/src/locale/	基础功能模块	格式化、插入等功能文本
packages/core/src/i18n/	核心i18n服务	语言切换、资源管理API

每个模块下都包含语言文件，例如英文翻译为en.ts，中文为zh-CN.ts。以基础模块的英文翻译packages/basic-modules/src/locale/en.ts为例，采用键值对结构组织：

export default {
  common: {
    ok: 'OK',
    delete: 'Delete',
    enter: 'Enter',
  },
  codeBlock: {
    title: 'Code block',
  },
  // 更多翻译项...
}

3步完成翻译贡献

第1步：准备翻译环境

首先需要准备开发环境：

1. 克隆项目仓库：git clone https://gitcode.com/gh_mirrors/wan/wangEditor
2. 安装依赖：yarn install
3. 熟悉项目结构，重点关注各模块下的locale目录

第2步：翻译实战操作

以新增日语翻译为例，需要完成以下操作：

1. 创建语言文件
   在三个核心模块下分别创建ja.ts文件：

   • packages/editor/src/locale/ja.ts
   • packages/basic-modules/src/locale/ja.ts

2. 编写翻译内容
   参照英文版本格式，完成对应语言翻译。以下是基础模块翻译示例：

// packages/basic-modules/src/locale/ja.ts
export default {
  common: {
    ok: '確認',
    delete: '削除',
    enter: '入力',
  },
  codeBlock: {
    title: 'コードブロック',
  },
  // 完整翻译所有键值对
}

3. 注册语言资源
   在模块入口文件中添加新语言资源，以编辑器模块为例：

// packages/editor/src/locale/index.ts
import { i18nAddResources } from '@wangeditor/core'
import enResources from './en'
import zhResources from './zh-CN'
import jaResources from './ja'  // 导入新语言

i18nAddResources('en', enResources)
i18nAddResources('zh-CN', zhResources)
i18nAddResources('ja', jaResources)  // 注册新语言

第3步：测试与提交

完成翻译后需要验证效果：

1. 本地测试
   修改编辑器初始化代码，设置默认语言为新翻译语言：

import { createEditor } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'

const editor = createEditor({
  selector: '#editor-container',
  lang: 'ja',  // 设置为新翻译的语言
})

2. 效果验证
   启动开发服务器后，检查所有翻译文本是否正确显示。以下是中英文界面对比：

中文界面：

英文界面：

3. 提交贡献
   按照docs/join.md中的贡献指南，提交Pull Request，核心团队会在48小时内审核你的翻译。

翻译规范与最佳实践

为确保翻译质量统一，请注意以下规范：

1. 术语一致性
   技术术语保持英文原词，如"Code block"不翻译为"代码块"而保留原名

2. 简洁性原则
   菜单和按钮文本控制在2-4个单词内，确保界面显示美观

3. 文化适配
   日期、数字等格式需符合目标语言习惯，如中文使用"年月日"，英文使用"MM/DD/YYYY"

4. 模块化翻译
   不同模块的相同概念可能有不同翻译，需参照各模块现有翻译保持一致

常见问题解答

Q: 发现翻译错误如何修正？
A: 直接修改对应语言文件后提交PR，标题注明"fix(i18n): correct {language} translation for {module}"

Q: 如何测试RTL（从右到左）语言？
A: 需在packages/core/src/i18n/index.ts中添加RTL支持配置

Q: 可以添加方言翻译吗？
A: 目前只接受官方语言翻译，如"zh-TW"（繁体中文）是被支持的，但不接受"zh-Cantonese"等同种语言变体

加入我们

wangEditor国际化是持续进行的长期项目，目前急需以下语言的翻译贡献者：

• 西班牙语
• 法语
• 阿拉伯语
• 俄语

如果你熟悉这些语言并有兴趣参与，欢迎通过docs/join.md中的方式联系核心团队，我们会提供详细指导和技术支持。

开源的力量在于社区，每一份翻译贡献都能让更多人用上优质的编辑器。立即行动，让你的母语在wangEditor中绽放光彩！

【免费下载链接】wangEditor 项目地址: https://gitcode.com/gh_mirrors/wan/wangEditor