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.languagelet_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 )=>{ } })
动态修改前为英文
网络异常，图片无法展示
|
动态修改后为韩文
网络异常，图片无法展示
|
