因为做的后台系统做了切换路由功能,使每个路由都keep-alive,使用tinymce编辑器时总是第一次打开渲染不出内容而且不能编辑,都要刷新下才能正常显示和编辑,百度找了许多方法,试了一遍后找到了对我的项目有效的办法:
首先就是给编辑器加上个key,
<tinymce-editor :init="init" v-model="form.container" id="tinymce" :key="tinymceFlag"></tinymce-editor>
data() {
return {
tinymceFlag: 1,
beforeDestroy() {
this.tinymce && this.tinymce.destroy();
activated() {
this.tinymceFlag++;
总结:就是给编辑器加上个key
vue modal 标签下
form表单子项tinymce 富文本编辑器
第一次打开页面渲染成功,关闭后之后相关页面打开都渲染失败,富文本编辑器渲染成了底层的textarea标签
因为项目某一模块也引用了tinymce,并且也在modal下的form表单,但是功能正常。
相对比,不成功的模块只是外层多了个tab
尝试的方法
tinymce 绑定一个自增的key (失败)
尝试去掉tab(失败)
尝试在渲染页面时动态给一个key/id (失败)
尝试在页面关闭时手动销毁相关组件(失败)
尝试修改相关组件的
<vue-tinymce :key="tinymceFlag" v-model="content" :setting="setting" :setup="setup" />
请求此组件时将this.tinymceFlag++ 每次都初始化为最新状态
// 编辑器示例id值
tinymceFlag: any = 1;
created() {
// 初始化当前登录人信息
可以点击:
说一说最近遇到的一个大大大BUG吧,如上图所示,我点击进去一个有富文本编辑的页面,这时候我是可以编辑的,第一次点击!随后我切到了别的页面,或者我再次点击同一个页面,这时候就无法编辑了!
好,我不慌!我找啊找解决方法,网上都说是第二次点击的时候,它的init方法不行了,才怪!
接下里说说我的解决方法,绝对有用!!!
首先我认为我们使用的这个富文本就如同我们调用接口使用返回数据时,我们在渲染的时候v-for要带一个key值的是一样的。
我们第一次点击进去的时候,tinymce一切正常
使用v-if控制tinymce的显示和隐藏,等于就是控制组件的创建和销毁。
1.编辑或详情时,open 为 true,tinymce 组件会加载渲染,关闭弹窗,则 open 为 false,组件从document中移除。
2.可与el-dialog框绑定为true时,富文本也为true
今天想要初始化富文本框里面的内容,tinymce虽说用v-model用来绑定值,但是,当值改变的时候,并不会发生响应式改变,这就很坑了。
只能通过setContent来设置值
this.$refs.question.setContent('')
当一个页面中存在多个富文本框的时候
假设值 arr = [1,2,3]
<div v.
在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑。为了增加一点点的用户体验,就顺手拿AjaxForm来实现Ajax提交。可是发现出现了一个意外的事情。就是每次提交,第一次提交时,AjaxForm会无法获得当前编辑的评论内容,即TextArea里面的内容,要再点击一次提交,才能将TextArea的内容提交上去。
关键是TinyMC...
最近工作中,项目上遇到一个这样的需求,就是在打开报表的打印预览界面时,去切换标签,切回打印预览界面的时候,要求界面不刷新。vue框架中,我们去处理此类问题,通常马上就会想到去使用vue框架中自带的keep-alive组件,所以一开始我也是去使用了keep-alive,但是发现没有达到预期效果,后面通过研究和查阅资料发现,在vue项目中加入了含有iframe的页面,在路由切换的过程中,使用keep-alive是达不到数据缓存的效果的。
2、使用keep-alive缓存不了iframe界面原因
TinyMCE init选项$scope.tinymceOptions = {plugins: 'base64img image imagetools paste ...',relative_urls: false,paste_data_images: true,...};paste_data_images:true选项表示不应从粘贴的内容中删除数据:url图像(内联图像)(请参阅docs).我使...