如何在Quill编辑器工具栏添加自定义按钮以插入图片标签文本

我明白你的需求啦——就是在Quill默认工具栏上加个按钮，点击后弹出图片列表，选完直接在光标位置插入纯文本格式的<img>标签，而且纯前端实现不用npm对吧？这其实不难，我给你一步步拆解：

1. 基础准备：引入Quill并初始化编辑器 #

首先在HTML里引入Quill的样式和脚本（本地文件即可，不用npm），然后初始化编辑器，同时自定义工具栏配置，把我们的新按钮加进去：

<!-- 引入Quill的样式和脚本（你可以使用本地文件或官方提供的CDN） -->
<link href="quill.snow.css" rel="stylesheet">
<script src="quill.js"></script>

<!-- 编辑器容器 -->
<div id="editor"></div>

<script>
  // 自定义工具栏配置，加入我们的自定义按钮image-select
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['link', 'code-block'],
    ['image-select'] // 这就是我们要加的自定义按钮
  ];

  // 初始化Quill编辑器
  const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: toolbarOptions
    }
  });
</script>

2. 给自定义按钮添加样式和点击事件 #

现在工具栏里已经有我们的按钮了，但它还没样式和功能，接下来给它加显示文字（或者自定义图标），并绑定点击事件：

// 获取工具栏模块
const toolbar = quill.getModule('toolbar');

// 给自定义按钮绑定点击处理函数
toolbar.addHandler('image-select', function() {
  // 点击按钮后触发图片选择弹窗
  showImageSelector();
});

// 给按钮设置样式和显示文本，让它看起来更直观
const imageSelectButton = document.querySelector('.ql-image-select');
imageSelectButton.innerHTML = '📷 选图插入标签';
imageSelectButton.style.padding = '2px 8px';
imageSelectButton.style.cursor = 'pointer';

3. 创建图片选择弹窗并处理插入逻辑 #

接下来写showImageSelector函数，弹出一个选择列表（这里用原生HTML做个简单弹窗，你可以根据需求改成更美观的样式），选完图片后插入纯文本格式的img标签到光标位置：

function showImageSelector() {
  // 假设你已经通过REST接口获取了图片列表，这里模拟一些测试数据
  const imageList = [
    { name: '风景图1', url: '/images/scenery1.jpg' },
    { name: '头像图1', url: '/images/avatar1.png' },
    { name: '图标图1', url: '/images/icon1.svg' }
  ];

  // 创建弹窗容器
  const selector = document.createElement('div');
  selector.style.position = 'fixed';
  selector.style.top = '50%';
  selector.style.left = '50%';
  selector.style.transform = 'translate(-50%, -50%)';
  selector.style.background = 'white';
  selector.style.border = '1px solid #ccc';
  selector.style.padding = '16px';
  selector.style.borderRadius = '4px';
  selector.style.zIndex = '9999';

  // 添加弹窗标题
  const title = document.createElement('h4');
  title.textContent = '选择要插入的图片';
  title.style.marginTop = '0';
  selector.appendChild(title);

  // 遍历图片列表，生成可点击的选项
  imageList.forEach(img => {
    const option = document.createElement('div');
    option.style.padding = '8px';
    option.style.cursor = 'pointer';
    option.style.borderBottom = '1px solid #eee';
    option.textContent = img.name;
    
    // 绑定选项点击事件
    option.addEventListener('click', () => {
      // 构造纯文本格式的img标签
      const imgTag = `<img src="${img.url}" alt="${img.name}">`;
      // 获取当前光标位置
      const range = quill.getSelection();
      
      if (range) {
        // 在光标位置插入纯文本标签
        quill.insertText(range.index, imgTag);
        // 插入后把光标移到标签后面，方便继续编辑
        quill.setSelection(range.index + imgTag.length);
      }
      
      // 关闭弹窗
      document.body.removeChild(selector);
    });
    
    selector.appendChild(option);
  });

  // 添加关闭按钮
  const closeBtn = document.createElement('button');
  closeBtn.textContent = '取消';
  closeBtn.style.marginTop = '12px';
  closeBtn.addEventListener('click', () => {
    document.body.removeChild(selector);
  });
  selector.appendChild(closeBtn);

  // 将弹窗添加到页面中
  document.body.appendChild(selector);
}

额外小提示：如果想要插入渲染后的图片 #

如果你之后改变需求，想要插入实际渲染出来的图片而不是纯文本标签，只需要把插入文本的代码换成嵌入图片的方法：

// 替换原来的quill.insertText为下面这行
quill.insertEmbed(range.index, 'image', img.url);

这样就能直接在编辑器里显示图片，而不是文本标签啦。

备注：内容来源于stack exchange，提问作者D.Bugger