tinymce 如何实现动态国际化

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
 )=>{
 }
 })

动态修改前为英文

动态修改后为韩文

点击查看更多