关于tinymce富文本第二次点击无法编辑,切换页面后无法点击,刷新页面可以点击

无法点击时:
在这里插入图片描述
可以点击:在这里插入图片描述
说一说最近遇到的一个大大大BUG吧,如上图所示,我点击进去一个有富文本编辑的页面,这时候我是可以编辑的,第一次点击!随后我切到了别的页面,或者我再次点击同一个页面,这时候就无法编辑了!
好,我不慌!我找啊找解决方法,网上都说是第二次点击的时候,它的init方法不行了,才怪!
接下里说说我的解决方法,绝对有用!!!

首先我认为我们使用的这个富文本就如同我们调用接口使用返回数据时,我们在渲染的时候v-for要带一个key值的是一样的。
我们第一次点击进去的时候,tinymce一切正常,当我们第二次点击的时候,就如图1一样,它的内容缺失了;我认为是它在创建的时候,虽然我们的值都是不一样的但是它认为我还是之前的我,所以创建失败了,我感觉也不算是初始化失败,因为它只是不能编辑;标题什么的还是有用的;
上面都是个人理解~

解决方法

:我们在使用富文本的时候,去给它绑定个key值

<tinymce :id="tinymceId" :key="tinymceFlag" v-model="dataForm.noticeDetails" :height="300"></tinymce>

这里的key就是让它每一次创建的时候都可以知道这是一次新的;
然后我们在data:

 tinymceFlag: 1,

在activated里:

   activated() {
         this.tinymceFlag++
     },

这时候就起作用了;
歪路
我不起作用之后我认为是初始化失败了,
1、然后我就去监听它的路由,然后路由改变之后就重新去执行初始化方法,无用!
2、然后我就觉得是我每一次退出去之后,我都没有让富文本销毁,销毁后重新进来它就会自己初始化,我就写了个销毁的方法,无用!
3、这时候我又认为是它的selector永远都是一个,再次进来的时候没有改变它的值,我就写了个动态的,无用!

  • 16
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nine percent 陈立农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值