表格使用Tinymce富文本插件编辑时切换编辑文本内容没有改变问题

1,157 阅读1分钟

image.png

编辑不同职位时富文本框内容在第一次赋值之后不再变化。 去看了tinymce的源码发现监听文本内容变化之前加了!this.hasChange && this.hasInit 判断。 但我编辑的文本框在第一次加载初始化之后改变了this.hasChange的值为true,编辑切换只是控制css隐藏显示样式,所以改变编辑框时不会触发初始化函数,hasChange的值始终为true.

image.png

这个时候我们注释watch内监听函数的判断可以解决这个问题,但是文本输入我们发现变成了倒序。

image.png

于是发现初始化执行的函数editor在每次用户输入时先获取了文本内容赋值因此变成倒序,注释这段代码,watch函数恢复。发现显示可以正常显示了,但修改的值没有赋值。因为没有触发getContent()函数。

image.png

image.png

最终解决方案,在引用富文本组件的代码加v-if,控制dom的加载:(dialogFormVisible为true时加载富文本组件,false时销毁dom)

image.png

源代码:

watch: {
    value(val) {
       if (!this.hasChange && this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val || ''))
       }
    }
  }
window.tinymce.init({
        selector: `#${this.tinymceId}`,
        language: this.languageTypeList['en'],
        height: this.height,
        body_class: 'panel-body ',
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        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   need Nonbreaking Space Plugin
        init_instance_callback: editor => {
          if (_this.value) {
            editor.setContent(_this.value)
          }
          _this.hasInit = true
          editor.on('NodeChange Change KeyUp SetContent', () => {
            this.hasChange = true
            this.$emit('input', editor.getContent())
          })
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', (e) => {
            _this.fullscreen = e.state
          })
        }
      })