多语言

默认情况 wangEditor 是不提供多语言功能的，因为这会增大我们的体积，让我们变得臃肿。

加载 i18next

想要使用多语言功能的小伙伴，首先需要安装 i18next

  1. npm i -S i18next

接入 i18next

仅仅是安装了 i18next 还不够，还需要把 i18next 接入到 wangEditor 当中

  1. // js 引入方式
  3. const E = window.wangEditor
  4. const editor = new E('#div1')
  6. // 引入 i18next 插件
  7. editor.i18next = window.i18next
  9. editor.create()

使用 i18next

目前我们仅提供两种翻译: ‘zh-CN’(简体中文) 和 ‘en’(英文) 使用它们也很简单，只需要在创建编辑器前，设置 lang 就可以了

  1. // js 引入方式
  3. const E = window.wangEditor
  4. const editor = new E('#div1')
  6. // 选择语言
  7. editor.config.lang = 'en'
  8. // 引入 i18next 插件
  9. editor.i18next = window.i18next
  11. editor.create()

自定义语言

很显然仅仅只是中文和英文是不够的，所以我们提供了可以自定义语言的方法

  1. // js 引入方式
  3. const E = window.wangEditor
  4. const editor = new E('#div1')
  6. // 选择语言
  7. editor.config.lang = 'japan'
  8. // 自定义语言
  9. editor.config.languages['japan'] = {
  10.     wangEditor: {
  11.         请输入正文: '本文を入力してください',
  12.     }
  13. }
  14. // 引入 i18next 插件
  15. editor.i18next = window.i18next
  18. editor.create()

语言模板

想要自定义语言，需要根据语言模板来，进行翻译才行

  1. {
  2.     wangEditor: {
  3.         插入: 'insert',
  4.         默认: 'default',
  5.         创建: 'create',
  6.         修改: 'edit',
  7.         如: 'like',
  8.         请输入正文: 'please enter the text',
  9.         menus: {
  10.           title: {
  11.                 标题: '标题',
  12.                 加粗: '加粗',
  13.                 字号: '字号',
  14.                 字体: '字体',
  15.                 斜体: '斜体',
  16.                 下划线: '下划线',
  17.                 删除线: '删除线',
  18.                 缩进: '缩进',
  19.                 行高: '行高',
  20.                 文字颜色: '文字颜色',
  21.                 背景色: '背景色',
  22.                 链接: '链接',
  23.                 序列: '序列',
  24.                 对齐: '对齐',
  25.                 引用: '引用',
  26.                 表情: '表情',
  27.                 图片: '图片',
  28.                 视频: '视频',
  29.                 表格: '表格',
  30.                 代码: '代码',
  31.                 分割线: '分割线',
  32.                 恢复: '恢复',
  33.                 撤销: '撤销',
  34.                 全屏: '全屏',
  35.                 代办事项: '代办事项',
  36.             },
  37.             dropListMenu: {
  38.                 设置标题: 'title',
  39.                 背景颜色: 'background',
  40.                 文字颜色: 'font color',
  41.                 设置字号: 'font size',
  42.                 设置字体: 'font family',
  43.                 设置缩进: 'indent',
  44.                 对齐方式: 'align',
  45.                 设置行高: 'line heihgt',
  46.                 序列: 'list',
  47.                 head: {
  48.                     正文: 'text',
  49.                 },
  50.                 indent: {
  51.                     增加缩进: 'indent',
  52.                     减少缩进: 'outdent',
  53.                 },
  54.                 justify: {
  55.                     靠左: 'left',
  56.                     居中: 'center',
  57.                     靠右: 'right',
  58.                 },
  59.                 list: {
  60.                     无序列表: 'unordered',
  61.                     有序列表: 'ordered',
  62.                 },
  63.             },
  64.             panelMenus: {
  65.                 emoticon: {
  66.                     默认: 'default',
  67.                     新浪: 'sina',
  68.                     emoji: 'emoji',
  69.                     手势: 'gesture',
  70.                 },
  71.                 image: {
  72.                     图片链接: 'image link',
  73.                     上传图片: 'upload image',
  74.                     网络图片: 'network image',
  75.                 },
  76.                 link: {
  77.                     链接: 'link',
  78.                     链接文字: 'link text',
  79.                     删除链接: 'delete',
  80.                     查看链接: 'view',
  81.                 },
  82.                 video: {
  83.                     插入视频: 'insert video',
  84.                 },
  85.                 table: {
  86.                     行: 'row',
  87.                     列: 'column',
  88.                     的: ' ',
  89.                     表格: 'table',
  90.                     添加行: 'add row',
  91.                     删除行: 'delete row',
  92.                     添加列: 'add column',
  93.                     删除列: 'delete column',
  94.                     设置表头: 'set header',
  95.                     取消表头: 'cancel header',
  96.                     插入表格: 'insert table',
  97.                     删除表格: 'delete table',
  98.                 },
  99.                 code: {
  100.                     删除代码: 'delete code',
  101.                     修改代码: 'edit code',
  102.                     插入代码: 'insert code',
  103.                 },
  104.             },
  105.         },
  106.         validate: {
  107.             张图片: 'images',
  108.             大于: 'greater than',
  109.             图片链接: 'image link',
  110.             不是图片: 'is not image',
  111.             返回结果: 'return results',
  112.             上传图片超时: 'upload image timeout',
  113.             上传图片错误: 'upload image error',
  114.             上传图片失败: 'upload image failed',
  115.             插入图片错误: 'insert image error',
  116.             一次最多上传: 'once most at upload',
  117.             下载链接失败: 'download link failed',
  118.             图片验证未通过: 'image validate failed',
  119.             服务器返回状态: 'server return status',
  120.             上传图片返回结果错误: 'upload image return results error',
  121.             请替换为支持的图片类型: 'please replace with a supported image type',
  122.             您插入的网络图片无法识别: 'the network picture you inserted is not recognized',
  123.             您刚才插入的图片链接未通过编辑器校验: 'the image link you just inserted did not pass the editor verification',
  124.         },
  125.     }
  126. }