记录解决tinymce富文本,第二次点击不显示焦点问题

1.此方法解决了我的问题
在用tinymce富文本的时候,由于是用在弹框上的,在第二次打开弹框的时候始终无法获取焦点。

后来才发现问题出在tinymce在弹框创建前创建了,所以导致这个问题,解决方案就是用 v-if=“visibile”,即当弹框显示的时候,tinymce才创建。

可以正常初始化数据,并且可以获取富文本编辑器的焦点。

<tinymce :id="addDefect" v-model="form.bugNote" v-if="dialogVisible"></tinymce>

2.此方法记录下来以便以后使用
无法点击时:
在这里插入图片描述

可以点击:
在这里插入图片描述
说一说最近遇到的一个大大大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永远都是一个,再次进来的时候没有改变它的值,我就写了个动态的,无用!
转载链接:https://blog.csdn.net/weixin_52031155/article/details/116201424

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值