Tinymce 如何实时监听附件增删变动？

tinymce 无法监听附件变动

在使用 tinymce 富文本编辑器插入附件时，遇到无法监听附件增删变动的难题。

问题描述：

• 使用了 tinymce-attachment 插件来插入附件。
• 监听富文本内容变化，发现插入空格 (

   

  ) 就能触发监听，但删除空格无法触发。
• 附件增删也无法被监听。

解决方案：

1. 移去 v-model：

   • 删除富文本编辑器上的 v-model 绑定。

2. 设置附件插入回调：

   • 在 tinymce 初始化时，添加如下回调：

     // 注意这里的 attachments_changed 是 attachment 插件提供的方法
     editor.on('attachmentsinserted', (attachments) => {});

     • 在回调中处理附件插入事件。

3. 监听 value 变化，解决光标问题：

   • watch 监听富文本编辑器的 value 属性，并解决光标问题。

     // 富文本编辑器的 value 属性记录了编辑器中的 html 内容
     watch: {
       value(newval, oldval) {},
     },

4. 添加插入附件成功后回调：

   • 在 methods 中添加如下方法：

     onattachmentinsertsuccess(attachment) {}

     • 在附件插入成功后调用该方法。

     • 在该方法中再次调用附件插入回调函数。

       this.attachmentInsertCallback(attachment);

以上就是Tinymce 如何实时监听附件增删变动？的详细内容，更多请关注其它相关文章！