Tinymce 监听附件变动失效？如何解决？

tinymce 监听附件无法监听到变动的解决方法

我们在使用 tinymce 时，可以通过附件插件添加附件。但如果你发现附件的插入或删除无法触发监听器，可以使用以下方法解决：

修复方法：

1. 移除 v-model：

2. 在初始化时添加回调：

   init: {
    ...
    init_instance_callback: function (editor) {
        editor.on('attachmentinsert attachmentremove', function (e) {
            // 监听附件变动
        });
    },
    ...
   }

3. 监听 value 并解决光标问题：

   watch: {
    value: function (val) {
        let range, editor = this.editor;
        range = editor.selection.getrng();
        editor.setcontent(val);
        editor.selection.setrng(range);
    }
   }

4. 添加方法：

   methods: {
    inserthtmlatcursor: function (html) {
        let editor = this.editor;
        let range, sel = editor.selection;
        range = sel.getrng();
        range.setstartafter(editor.selection.getnode());
        range.setendafter(editor.selection.getnode());
        sel.setrng(range);
        editor.execcommand('mceinsertcontent', false, html);
    }
   }

5. 附件插入成功后再次调用：

   editor.on('attachmentinsert', function (e) {
    // 插入附件后触发
    this.insertHtmlAtCursor('');
   });

实现后，附件的插入和删除都将能够触发监听器。