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

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

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

clipboard.png

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

以下是代码

<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>

回答:

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

回答:

遇到了一样的问题,请问解决了吗?

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注