vue中使用 tinymce 只有第一次打开页面初始化有效

Question

我在vue中使用tinymce
第一次打开页面初始化有效果

但第二次进入页面 初始化便无效 必须刷新页面才可以

请问这个问题应该如何解决

以下是代码

<template>
    <textarea id="tinymceId" class="tinymce-textarea" v-model="selectContent.content" />
</template>
<script>

import plugins from '@/components/Tinymce/plugins'
import toolbar from '@/components/Tinymce/toolbar'
import load from '@/components/Tinymce/dynamicLoadScript'


export default {
  
  mounted() {
    const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce@5.0.11/tinymce.min.js'
    const _this = this
    load(tinymceCDN, (err) => {
      if (err) {
        this.$message.error(err.message)
        return
      }
      // alert("!")
      window.tinymce.init({
        image_advtab: true,
        selector: "#tinymceId",
        language: 'zh_CN',
        language_url: 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/langs/zh_CN.js',
        height: 300,
        body_class: 'panel-body ',
        object_resizing: false,
        toolbar: toolbar,
        menubar: 'file edit insert view format table image',
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: 'clean',
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square',
        advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
        init_instance_callback: editor => {


          editor.on('NodeChange Change KeyUp SetContent', () => {

            _this.selectContent.content = editor.getContent()
          })
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', (e) => {
            // console.log(e)
            // _this.fullscreen = e.state
          })
        }

      })
    })

  },

}
</script>

Answer 1

初始化 tinymce 文本编辑器，确保 selector 唯一性
当 selector 选中同一个 dom id 时，tinymce 只 init 一次，
所以每次都动态改变 selector 所选中 dom id 即可

Answer 2

遇到了一样的问题，请问解决了吗？

Answer 3

解决了吗?我也是遇到这个问题

Answer 4

在关闭页面或者弹窗的时候调用 tinymce.remove('#tinyDom')

Answer 5

在初始化时给data里的 editor 赋值,然后在beforeDestroy 函数中调用 this.editor.destroy();

created(){
  tinymce.init({
    selector: `#dom${this.domSelector}`, // "textarea#editor"
  })
  .then((editors) => {
    this.editor = editors[0];
  });
},
beforeDestroy() {
    this.editor.destroy();
},