多语言
默认情况 wangEditor 是不提供多语言功能的，因为这会增大我们的体积，让我们变得臃肿。
加载 i18next
想要使用多语言功能的小伙伴，首先需要安装 i18next
npm i -S i18next
接入 i18next
仅仅是安装了 i18next 还不够，还需要把 i18next 接入到 wangEditor 当中
// js 引入方式
const E = window.wangEditor
const editor = new E('#div1')
// 引入 i18next 插件
editor.i18next = window.i18next
editor.create()
使用 i18next
目前我们仅提供两种翻译: 'zh-CN'(简体中文) 和 'en'(英文) 使用它们也很简单，只需要在创建编辑器前，设置 lang 就可以了
// js 引入方式
const E = window.wangEditor
const editor = new E('#div1')
// 选择语言
editor.config.lang = 'en'
// 引入 i18next 插件
editor.i18next = window.i18next
editor.create()
自定义语言
很显然仅仅只是中文和英文是不够的，所以我们提供了可以自定义语言的方法
// js 引入方式
const E = window.wangEditor
const editor = new E('#div1')
// 选择语言
editor.config.lang = 'japan'
// 自定义语言
editor.config.languages['japan'] = {
wangEditor: {
请输入正文: '本文を入力してください',
}
}
// 引入 i18next 插件
editor.i18next = window.i18next
editor.create()
语言模板
想要自定义语言，需要根据语言模板来，进行翻译才行
{
wangEditor: {
插入: 'insert',
默认: 'default',
创建: 'create',
修改: 'edit',
如: 'like',
请输入正文: 'please enter the text',
menus: {
title: {
标题: '标题',
加粗: '加粗',
字号: '字号',
字体: '字体',
斜体: '斜体',
下划线: '下划线',
删除线: '删除线',
缩进: '缩进',
行高: '行高',
文字颜色: '文字颜色',
背景色: '背景色',
链接: '链接',
序列: '序列',
对齐: '对齐',
引用: '引用',
表情: '表情',
图片: '图片',
视频: '视频',
表格: '表格',
代码: '代码',
分割线: '分割线',
恢复: '恢复',
撤销: '撤销',
全屏: '全屏',
代办事项: '代办事项',
},
dropListMenu: {
设置标题: 'title',
背景颜色: 'background',
文字颜色: 'font color',
设置字号: 'font size',
设置字体: 'font family',
设置缩进: 'indent',
对齐方式: 'align',
设置行高: 'line heihgt',
序列: 'list',
head: {
正文: 'text',
},
indent: {
增加缩进: 'indent',
减少缩进: 'outdent',
},
justify: {
靠左: 'left',
居中: 'center',
靠右: 'right',
},
list: {
无序列表: 'unordered',
有序列表: 'ordered',
},
},
panelMenus: {
emoticon: {
默认: 'default',
新浪: 'sina',
emoji: 'emoji',
手势: 'gesture',
},
image: {
图片链接: 'image link',
上传图片: 'upload image',
网络图片: 'network image',
},
link: {
链接: 'link',
链接文字: 'link text',
删除链接: 'delete',
查看链接: 'view',
},
video: {
插入视频: 'insert video',
},
table: {
行: 'row',
列: 'column',
的: ' ',
表格: 'table',
添加行: 'add row',
删除行: 'delete row',
添加列: 'add column',
删除列: 'delete column',
设置表头: 'set header',
取消表头: 'cancel header',
插入表格: 'insert table',
删除表格: 'delete table',
},
code: {
删除代码: 'delete code',
修改代码: 'edit code',
插入代码: 'insert code',
},
},
},
validate: {
张图片: 'images',
大于: 'greater than',
图片链接: 'image link',
不是图片: 'is not image',
返回结果: 'return results',
上传图片超时: 'upload image timeout',
上传图片错误: 'upload image error',
上传图片失败: 'upload image failed',
插入图片错误: 'insert image error',
一次最多上传: 'once most at upload',
下载链接失败: 'download link failed',
图片验证未通过: 'image validate failed',
服务器返回状态: 'server return status',
上传图片返回结果错误: 'upload image return results error',
请替换为支持的图片类型: 'please replace with a supported image type',
您插入的网络图片无法识别: 'the network picture you inserted is not recognized',
您刚才插入的图片链接未通过编辑器校验: 'the image link you just inserted did not pass the editor verification',
},
}
}