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

tinymce 无法监听附件变动

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

问题描述：

• 使用了 tinymce-attachment 插件来插入附件。
• 监听富文本内容变化，发现插入空格 (<p> </p>) 就能触发监听，但删除空格无法触发。
• 附件增删也无法被监听。

解决方案：

1. 移去 v-model：

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

2. 设置附件插入回调：

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

     

     Tellers AI

     Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

     78

     查看详情

     // 注意这里的 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 如何实时监听附件增删变动？的详细内容，更多请关注php中文网其它相关文章！