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

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《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 如何实时监听附件增删变动？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！