如何在QuillJS（react-js）中更改默认标题名称？

Question

我在构造函数中设置了这样的Quill文本编辑器：

this.modules = {
            toolbar: {
                container: [
                ...
                [{ 'header': [1, 2, false], 3 }],
                ...]
            }
        };

它会产生一个具有以下名称的下拉菜单：'标题1'，'标题2'，'普通'，'标题3'。

我想使附加到这些名称的值/函数保持相同。我只想将名称更改为：“标题”，“副标题”，“段落”，“小段落”。

我如何将名称更改为'标题'，'副标题'，'段落'，'小段落'？

Answer 1

实际上，标题行为有些出乎意料。您可以通过两种可能的方式获得所需的结果。 第一种方法是使用HTML配置编辑器的工具栏，并添加更多详细信息：

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: '#toolbar'
  }
});

#toolbar .ql-header {
  width: 160px;
}

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div id="toolbar">
  <div class="ql-formats">
    <select class="ql-header">
      <option value="h1">Title</option>
      <option value="h2">Subheading</option>
      <option value="h3">Small Paragraph</option>
    </select>
    <button class="ql-clean"></button>
  </div>
</div>
<div id="editor">
  <p>Try me...</p>
</div>

我必须告诉您，无法在标题中设置选项false或normal或段落。我已经尝试过，不幸的是，没有出现期望的结果。同样，我也无法告诉您原因。如果您想找出原因，建议您查看header source code。

因此，要删除标题格式并使文本保持正常（作为简单段落），可以使用纯净格式，如前面的示例所示。

第二种方法可以用来解决您的问题的方法是创建一种新格式。您可以将这种新格式配置为接收值，并根据过去的值以不同的方式运行，这甚至包括如果传递了错误的值，则删除格式本身。有一个如何执行此操作的示例here。重点项目（Nº1）满足您的所有需求。

摘要，第一种方法使用两种格式来执行您想要的操作。如果不希望这样做，建议您采用第二种方法。即使事实变得有些复杂，它也可以使您完全实现所需的功能。