如何为Quill编辑器中通过insertEmbed插入的图片添加onclick事件？

嘿，我来帮你解决这个问题！Quill编辑器本身不支持直接给嵌入的图片添加onclick事件，因为它的内容是基于Delta和Blot系统管理的，直接操作DOM很容易被Quill的重渲染覆盖。不过有两种靠谱的方法可以实现：

方法1：自定义图片Blot（推荐方案） #

这是最符合Quill设计理念的方式，通过自定义图片格式（Blot），在创建图片DOM元素时直接绑定点击事件：

// 导入Quill的原生Image Blot类
const Image = Quill.import('formats/image');

// 自定义带点击事件的图片Blot
class ClickableImage extends Image {
  static create(value) {
    // 调用父类方法创建基础图片节点
    const imgNode = super.create(value);
    // 绑定onclick事件
    imgNode.onclick = function() {
      // 这里替换成你的点击逻辑，比如弹窗预览、跳转等
      console.log('图片被点击啦！', this.src);
      // 示例：打开图片预览弹窗
      // openImagePreview(this.src);
    };
    return imgNode;
  }
}

// 注册自定义Blot，替换原生的image格式
Quill.register(ClickableImage, true);

完成上述代码后，你原来的插入图片代码self._quillInstance.insertEmbed(index.index, 'image', img.src);会自动使用这个带点击事件的自定义Blot，后续插入的所有图片都会自带onclick事件。

方法2：监听内容变化后动态绑定事件（快速实现） #

如果不想自定义Blot，可以通过监听Quill的内容变化事件，在图片插入完成后给DOM元素绑定点击事件：

// 监听Quill的文本变化事件
self._quillInstance.on('text-change', (delta, oldDelta, source) => {
  // 只处理用户主动触发的内容变化，忽略Quill内部的自动更新
  if (source !== 'user') return;

  // 遍历Delta操作，检测是否有图片插入动作
  delta.ops.forEach(op => {
    if (op.insert?.image) {
      // 延迟执行，确保Quill已完成DOM渲染
      setTimeout(() => {
        // 选择所有未绑定onclick的图片，避免重复绑定
        const images = self._quillInstance.root.querySelectorAll('img:not([onclick])');
        images.forEach(img => {
          img.onclick = function() {
            console.log('图片被点击了！', this.src);
            // 这里写你的点击逻辑
          };
        });
      }, 0);
    }
  });
});

注意事项 #

• 方法1的优势是事件绑定逻辑和图片格式绑定在一起，不会因为Quill的重渲染丢失事件，适合长期维护的项目；
• 方法2要注意避免重复绑定事件，所以用了img:not([onclick])选择器，同时setTimeout是为了确保Quill已经完成图片的DOM渲染。

内容的提问来源于stack exchange，提问作者BaoBao