Quill.js：如何用带图标按钮的字体选择器替代字体名称下拉框

Quill默认的字体选择器是基于<select>的下拉框，而颜色选择器是内置的弹出式面板交互。要实现字体选择器和颜色选择器一致的体验，核心是替换默认的字体选择控件逻辑，自定义弹出式选择面板并绑定Quill的格式设置API。以下针对你给出的两种实现方式，分别说明修改方案和关键代码点：

一、针对数组配置的Toolbar（方式一） #

默认的[{ 'font': [] }]配置会生成下拉选框，无法直接改成弹出面板，需要自定义Toolbar控件：

1. 修改Toolbar配置，将字体项替换为自定义标识，比如：

   var toolbarOptions = [
     ['bold', 'italic', 'underline', 'strike'],
     // 替换默认font配置为自定义按钮标识
     ['custom-font-picker'],
   ];
   const quill = new Quill('#editor', { 
     modules:{toolbar:toolbarOptions}, 
     theme:'snow'
   });
   

2. 获取Quill生成的Toolbar DOM，找到自定义按钮并添加点击事件，触发自定义字体选择弹窗。
3. 实现弹出式字体面板，点击字体选项时调用quill.format('font', 字体名称)应用格式。

二、针对自定义DOM的Toolbar（方式二） #

这种方式更灵活，直接替换原有<select>为自定义按钮，再实现弹窗逻辑：

1. 修改Toolbar的DOM结构，替换原<select class="ql-font">为自定义按钮：

   <div id="tools" >
     <button class="ql-underline" ></button>
     <button class="ql-strike" ></button>
     <!-- 自定义字体选择按钮 -->
     <button class="ql-font-picker" id="fontPickerBtn">字体</button>
     <select class="ql-color" >'..<options>..'</select>
   </div>
   <div id="editor"></div>
   

2. 添加自定义字体选择弹窗，并绑定交互逻辑：

   <!-- 自定义字体弹窗，参考Quill颜色选择器的样式 -->
   <div id="fontPicker" class="ql-picker-options" style="display:none; position:absolute;">
     <div class="font-option" data-font="Arial">Arial</div>
     <div class="font-option" data-font="Georgia">Georgia</div>
     <div class="font-option" data-font="Courier New">Courier New</div>
   </div>
   
   <script>
     const quill = new Quill('#editor', { 
       modules:{toolbar:"#tools"}, 
       theme:'snow'
     });
   
     const fontPickerBtn = document.getElementById('fontPickerBtn');
     const fontPicker = document.getElementById('fontPicker');
     const fontOptions = fontPicker.querySelectorAll('.font-option');
   
     // 点击按钮切换弹窗显示
     fontPickerBtn.addEventListener('click', (e) => {
       e.stopPropagation();
       fontPicker.style.display = fontPicker.style.display === 'none' ? 'block' : 'none';
     });
   
     // 点击页面空白处关闭弹窗
     document.addEventListener('click', () => {
       fontPicker.style.display = 'none';
     });
   
     // 选择字体并应用到编辑器
     fontOptions.forEach(option => {
       option.addEventListener('click', () => {
         const fontName = option.dataset.font;
         quill.format('font', fontName);
         // 更新按钮显示当前选中字体
         fontPickerBtn.textContent = fontName;
         fontPicker.style.display = 'none';
       });
     });
   
     // 同步编辑器选区的字体状态到按钮
     quill.on('selection-change', (range) => {
       if (range) {
         const currentFormat = quill.getFormat(range);
         fontPickerBtn.textContent = currentFormat.font || '字体';
       }
     });
   </script>
   

3. 添加适配Quill主题的样式：

   #fontPicker {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 4px;
     padding: 8px;
     z-index: 1000;
   }
   .font-option {
     padding: 4px 8px;
     cursor: pointer;
     font-family: inherit;
   }
   .font-option:hover {
     background-color: #f5f5f5;
   }
   /* 给每个字体选项设置对应字体 */
   .font-option[data-font="Arial"] { font-family: Arial; }
   .font-option[data-font="Georgia"] { font-family: Georgia; }
   .font-option[data-font="Courier New"] { font-family: "Courier New"; }
   

关键注意点 #

• 字体名称要和Quill的字体配置对应：如果在Quill初始化时自定义了font的映射（比如{ font: ['Arial', '自定义字体'] }），要确保弹窗中使用的字体名称和配置一致。
• 状态同步：通过selection-change事件监听选区格式变化，更新按钮显示，保证交互一致性。
• 样式适配：参考Quill内置组件的样式（比如ql-picker-options类），让自定义弹窗和原有Toolbar风格统一。

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