tinymce 如何实现动态国际化

Fivecc

发布于 2022-11-21 11:28:05

1.3K0

发布于 2022-11-21 11:28:05

文章被收录于专栏：前端ACE

tinymce 如何实现动态国际化

tinymce 是一个非常强大的富文本编辑器，tinymce是支持开启通过配置 language 来决定 tinymce 的语言版本例如下面配置日文英文中文且在同一个页面

 tinymce.init({
    selector: 'textarea.tinymce',
    plugins: `code image imagetools media`,
    toolbar: `code`,
    skin: false,
    language: 'ja',
    min_height:240,
    skeletonScreen: true,
    content_css: false,
  }).then(()=>{
	tinymce.init({
	      selector: 'div#mytextarea',
	      menubar: 'file edit  insert view format table tools help',
	      skin: false,
	      plugins: 'tpImportword',
	      toolbar: 'tpImportword',
	      content_css: false,
	      min_height:240,
	      skeletonScreen: true
	    }).then(()=>{
	      tinymce.init({
	        selector: 'div#mytextarea3',
	        skin: false,
	        language: 'zh_CN',
	        content_css: false,
	        min_height:240,
	        skeletonScreen: true,
	        plugins: `code`,
	        toolbar: `code`,
	      })
	  })
  });

注意需要每一个tinymce editor 实例完成之后才能进行实例下一个所有需要采用 tinymce.init({...}).then(()=>{ tinymce.init({...}).then(()=>{ ... })... }) 的用法。否则只能得到最后一个实例的语言版本

但是问题来了因为 tinymce 的菜单面板是动态生成， tinymce 官方这一块的逻辑并没有考虑到不同语言实例在同一页面，【具体，可以近似看成原型链的问题】，所以菜单面板的语言就会出现生成的是最后一个语言配置，如下图英文实例菜单生成结果为中文

那么这个问题该如何解决

解决方案就是当鼠标在每个tinymce 实列上方，立即进行一次语言重置。

具体方案，通过如下代码

     editor.editorContainer.onmouseover = () => {
          let _language = editor.settings.language 
          let _currentCodeVal = editor.editorManager.i18n.getCode()
          _currentCodeVal != _language && editor.editorManager.i18n.setCode(_language)
      };

解决方案我已经集成到了 Tinymce-plugin 中

你可以通过下载tinymce-plugin，并配置 tp_i18n 为 true 来实现优雅的同时渲染多语言版本，实现代码如下：

tinymce.init({
    language: 'zh_CN',
    content_css: false,
    tp_i18n: true,
    min_height:240,
    plugins: `code`,
    toolbar: `code`,
  })

同时 tinymce-plugin 也集成实现了 tinymce动态国际化

通过配置 tp_i18n_langs: true 然后自定义菜单项加入 tpI18n 来开启此项功能

实现如下

   tinymce.init({
      selector: 'div#mytextarea',
      menubar: 'file edit  insert view format table tools help mymenubar',
      skin: false,
      tp_i18n: true,
      plugins: 'tpImportword',
      toolbar: 'tpImportword',
      tp_i18n_langs: true,
      content_css: false,
      menu: {
          mymenubar: { title: 'Extension', items: 'tpI18n'  },
      },
      min_height:240,
      skeletonScreen: true,
      setup: (
        editor
      )=>{
      }
    })

动态修改前为英文