要实现的功能是三种语言(英文,繁体中文,简体中文)切换,原来是用tinymce-vue 和element做的,大概是这样,el-dialog弹窗里面用el-tab包含三个tinymce,但是中途发现很多问题:
1.el-dialog弹窗,el-tab遍历出来三个tab切换,使用tinymce.init().thne()写法,三个tingmce都是显示最后一个then()的简体中文
2.以为是遍历的tinymce问题,后来写死不遍历,只要把外面的删掉了,里面的就不行,就算外面的保留了,但是第一个没有初始化,第二个第三个可以
3.后来在el-tab外面写死三个不同语言的tinymce富文本,外面写死的可以,但是el-tab第一个没初始化,第二第三个没问题
总结一下问题,tinymce-vue有问题,el-tab组件有问题,el-dialog有问题。
最后我是这样做的:
舍弃tinymce-vue,直接使用tinymce,并且每次点击弹出el-dialog时,我都初始化一次:
<el-dialog>
<el-button @click="langChange('en')">en</el-button>
<el-button @click="langChange('tw')">tw</el-button>
<el-button @click="langChange('cn')">cn</el-button>
<div v-show="type === 'en'" class="en">
<div id="my-tinymce-id-en">
<p>00</p>
</div>
</div>
<div v-show="type === 'tw'" class="tw">
<div id="my-tinymce-id-tw">
<p>11</p>
</div>
</div>
<div v-show="type === 'cn'" class="cn">
<div id="my-tinymce-id-cn">
<p>22</p>
</div>
</div>
</el-dialog>
大概html就这样,有些代码没有放出来,自己补全就行,弹窗的参数之类的
下面时显示弹窗(visible参数为ture)后接着的JS代码
this.$nextTick(() => {//关键
tinymce.remove() //关键
window.tinymce.dom.Event.domLoaded = true //关键
tinymce.dom.Event.domLoaded = true
tinymce.init({
selector: '#my-tinymce-id-en', // 指定容器
language_url: 'tinymce/langs/en.js', // 语言包
language: 'en', // 语言
// inline: true, // 内联模式
height: 100 // 编辑器高度
}).then(() => {
tinymce.init({
selector: '#my-tinymce-id-tw', // 指定容器
language_url: 'tinymce/langs/zh_TW.js', // 语言包
language: 'zh_TW', // 语言
// inline: true, // 内联模式
height: 100 // 编辑器高度
}).then(() => {
tinymce.init({
selector: '#my-tinymce-id-cn', // 指定容器
language_url: 'tinymce/langs/zh_CN.js', // 语言包
language: 'zh_CN', // 语言
// inline: true, // 内联模式
height: 100 // 编辑器高度
})
})
})
})
这里的每一行除了height属性,其他的每一行都是重点,不能缺少,缺少了就不行
然后自己写三个按钮切换语言,容器就写死三个,用v-show动态切换,其实就是自己写一个tab切换,
这样就可以实现tinymce的语言切换了
补充
虽然表面的语言显示切换了,但是工具栏的语言还是默认用的最后一个的,目前问题还没有解决,也不知道怎么弄,如果有大佬知道怎么弄,可以分享一下,谢谢