j-editor在tab切换时内容消失切不可编辑

项目使用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++
    },