tinymce富文本语言切换的坑

要实现的功能是三种语言(英文,繁体中文,简体中文)切换,原来是用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的语言切换了tinymce语言切换

补充

虽然表面的语言显示切换了,但是工具栏的语言还是默认用的最后一个的,目前问题还没有解决,也不知道怎么弄,如果有大佬知道怎么弄,可以分享一下,谢谢

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值