写点什么

tinymce 如何实现动态国际化

作者:Five
  • 2022 年 8 月 03 日
  • 本文字数:1360 字

    阅读完需:约 4 分钟

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      )=>{      }    })
复制代码

动态修改前为英文


动态修改后为韩文


点击查看更多

发布于: 刚刚阅读数: 3
用户头像

Five

关注

有事多研究,没事瞎琢磨 2022.08.02 加入

CSDN 前端领域优质创作者 , 博客专家认证。 退役ACMer, IT技术狂热爱好者 擅长领域,web前端,算法, 业务架构,可视化,富文本编辑器等。 github: https://github.com/Five-great

评论

发布
暂无评论
tinymce 如何实现动态国际化_插件开发_Five_InfoQ写作社区