tinymce 如何实现动态国际化
【摘要】 tinymce 是一个非常强大的富文本编辑器,tinymce是支持开启通过配置 `language` 来决定 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
)=>{
}
})
动态修改前为英文
动态修改后为韩文
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)