为Quill编辑器添加自定义图标按钮以实现Bootstrap下拉菜单功能

要实现需求中的功能，我们需要自定义Quill工具栏按钮，结合Bootstrap 5的下拉组件实现点击弹出选项，并在选择后插入指定文本。以下是完整实现方案：

完整代码实现 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <style>
    /* 调整下拉按钮与Quill工具栏原生按钮样式统一 */
    .ql-toolbar .dropdown-toggle {
      border: none;
      background: transparent;
      padding: 8px;
      cursor: pointer;
    }
    .ql-toolbar .dropdown-toggle:hover {
      background-color: #eee;
    }
  </style>
</head>
<body>
  <!-- 预定义下拉菜单模板，初始隐藏 -->
  <div id="custom-dropdown" class="dropdown d-none">
    <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
      </svg>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#" data-text="Action">Action</a></li>
      <li><a class="dropdown-item" href="#" data-text="Action action">Action action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#" data-text="Something else here">Something else here</a></li>
    </ul>
  </div>

  <div id="editor">
    <p>Hello World!</p>
  </div>

  <script>
    // 初始化Quill编辑器
    var editor = new Quill('#editor', {
      modules: {
        toolbar: {
          container: ['bold', 'italic', 'image',
            { size: ['small', false, 'large', 'huge'] },
            // 添加自定义按钮占位符
            'custom-dropdown',
            'clean'
          ],
          handlers: {
            // 自定义按钮处理逻辑
            'custom-dropdown': function() {
              var toolbar = this.container;
              var dropdownEl = document.getElementById('custom-dropdown');
              // 显示下拉组件并插入到工具栏
              dropdownEl.classList.remove('d-none');
              toolbar.appendChild(dropdownEl);
              // 初始化Bootstrap下拉实例
              new bootstrap.Dropdown(dropdownEl.querySelector('.dropdown-toggle'));
              // 绑定菜单项点击事件
              dropdownEl.querySelectorAll('.dropdown-item').forEach(item => {
                item.addEventListener('click', function(e) {
                  e.preventDefault();
                  var text = this.getAttribute('data-text');
                  // 在光标位置插入格式化后的文本
                  editor.insertText(editor.getSelection().index, `{{${text}}}`);
                });
              });
              // 仅初始化一次，移除重复触发的handler
              delete this.handlers['custom-dropdown'];
            }
          }
        }
      },
      theme: 'snow',
    });
  </script>
</body>
</html>

关键逻辑说明 #

1. 自定义工具栏按钮：

   • 在Quill工具栏配置中加入'custom-dropdown'标识，通过handlers定义该按钮的触发逻辑
   • 将预定义的Bootstrap下拉组件插入到工具栏中，避免重复创建

2. 下拉功能集成：

   • 使用Bootstrap官方的Dropdown类初始化下拉交互，确保组件功能正常

3. 文本插入逻辑：

   • 给每个下拉菜单项添加data-text属性存储目标文本
   • 点击时通过Quill的insertText方法，在当前光标位置插入{{目标文本}}格式的内容

4. 样式适配：

   • 自定义CSS让下拉按钮和Quill原生工具栏按钮的视觉风格保持一致

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