如何让Quill自定义工具栏中的“Normal”标题选项正常工作

问题出在你给“Normal”选项只加了selected属性，但没有设置正确的value。Quill在匹配工具栏状态时，是通过选项的value值来对应格式的——源码里明确把false作为“Normal”（即无标题格式）的标识，所以你需要给“Normal”选项加上value="false"，而不是只靠selected属性。

修改后的自定义工具栏代码：

const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header">
      <option value="2">Bloc</option>
      <option value="3">Titre 1</option>
      <option value="4">Titre 2</option>
      <option value="false" selected>Normal</option>
    </select>
  </div>
);

原理说明 #

从你贴的Quill源码片段能看出来：

• 当标题级别为具体数字时，会给option设置对应的value
• 当对应“Normal”（无标题）时，用的是value=false，并且设置selected作为默认选中状态

你之前的代码里“Normal”选项没有value="false"，Quill无法将文本的“无标题”状态和这个选项关联起来，所以选中普通文本时工具栏不会高亮该选项。加上正确的value后，Quill就能正确匹配状态，实现联动。

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