如何在Summernote编辑器插入图片时自定义元素outerHtml代码

需求说明 #

我们在使用Summernote编辑器插入图片时，默认会生成如下的img标签：

<img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />

实际开发中通常有两种自定义需求：

• 给img标签添加自定义数据属性，比如增加data-src属性，最终生成：

  <img data-src="abc" src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
  

• 插入图片时不生成默认img标签，而是外层包裹a标签，或直接生成a标签结构

实现方案 #

Summernote提供了onImageUpload回调和insertNodeAPI，可以灵活自定义插入的节点结构，无需修改源码。

方案1：给img添加自定义属性 #

初始化Summernote时配置onImageUpload回调，自己构造img节点后插入即可：

$('#summernote').summernote({
  // 其余基础配置自行补充
  callbacks: {
    onImageUpload: function(files) {
      const editor = this;
      // 示例为本地预览逻辑，可替换为上传到你的后端服务器获取图片地址
      const fileReader = new FileReader();
      fileReader.onload = function (e) {
        // 自定义构造img节点，添加需要的属性
        const customImg = document.createElement('img');
        customImg.src = e.target.result;
        customImg.dataset.src = 'abc'; // 自定义数据属性按需修改
        // 将节点插入到编辑器当前光标位置
        $(editor).summernote('insertNode', customImg);
      };
      fileReader.readAsDataURL(files[0]);
    }
  }
});

方案2：插入a标签替代原生img结构 #

如果需要插入a标签包裹img，或自定义任意结构，直接修改构造的节点即可：

$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      const editor = this;
      const fileReader = new FileReader();
      fileReader.onload = function (e) {
        const imgUrl = e.target.result;
        // 构造自定义a标签结构，属性可按需调整
        const customLink = document.createElement('a');
        customLink.href = imgUrl;
        customLink.target = '_blank';
        // 内部可保留img也可根据需求修改内容
        const img = document.createElement('img');
        img.src = imgUrl;
        customLink.appendChild(img);
        // 插入到编辑器
        $(editor).summernote('insertNode', customLink);
      };
      fileReader.readAsDataURL(files[0]);
    }
  }
});

全局修改默认插入逻辑 #

如果不想每次配置回调，可直接重写Summernote的insertImage方法全局生效：

$.extend($.summernote.plugins, {
  'insertImage': function (context) {
    this.events = {
      'image.insert': function (e, url, filename) {
        const img = document.createElement('img');
        img.src = url;
        img.dataset.src = 'abc'; // 全局统一加自定义属性
        // 也可这里直接构造a标签，全局生效
        context.invoke('editor.insertNode', img);
      }
    };
  }
});

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