项目使用jeccgboot低代码平台
需求是在一个tab里再放一个tab,里面放三个富文本编辑器,jeecgboot的j-editor组件封装了tinymce插件来实现富文本编辑功能。
问题是在切换到基本信息、特征参数这些tab再切换回详情时富文本内文字消失且不可编辑,
网上查阅后发现在切换其他tab过程中富文本的key值没有改变,导致再切换回来富文本编辑器没有重新渲染,出现先前编辑的文字消失且无法再次编辑的问题。
我的解决方法是给每一个富文本的key绑定一个时间戳;第二个富文本在时间戳的基础上加1000,第三个富文本在时间戳的基础上加2000,这样三个富文本都有了各自到key值。然后在最外层tabs切换时,给每个富文本的key加一,key值发生改变则会重新渲染这个元素,至此解决刷新问题,
但是又出现了新的问题:在点击了使用方法或注意方法tab 再切换去外层tab再切换回来时,发现这两个tab先前编辑的文字消失了!最终解决方法是给这两个富文本的tab-pane加一个:forceRender="true"的属性,这个属性的意思是当tab-pane被隐藏时是否还要渲染DOM元素,设置为true则是隐藏时也渲染。
附上代码:
模板中:
<a-tab-pane key="3" tab="详情">
<a-tabs
:default-active-key="tinymceFlag1"
tab-position="left"
:style="{ height: '100%', minHeight: '350px', marginTop: '15px' }"
>
<a-tab-pane tab="主要性能" :forceRender="true" :key="tinymceFlag1">
<a-form-item :style="{ height: '350px' }">
<j-editor v-decorator="['wmMainPerformance', { trigger: 'input' }]" />
</a-form-item>
</a-tab-pane>
<a-tab-pane tab="使用方法" :forceRender="true" :key="tinymceFlag2">
<a-form-item :style="{ height: '350px' }">
<j-editor v-decorator="['wmUsageMethod', { trigger: 'input' }]" />
</a-form-item>
</a-tab-pane>
<a-tab-pane tab="注意方法" :forceRender="true" :key="tinymceFlag3">
<a-form-item :style="{ height: '350px' }">
<j-editor v-decorator="['wmAttention', { trigger: 'input' }]" />
</a-form-item>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
data中:
tinymceFlag1: Date.now(),
tinymceFlag2: Date.now() + 1000,
tinymceFlag3: Date.now() + 2000,
methods中:
handleTabsChange(val) {
this.tinymceFlag1++
this.tinymceFlag2++
this.tinymceFlag3++
},