如何更改 QuillJS (react-js) 中的默认标题名称？

Question

我在构造函数中设置了 Quill 文本编辑器，如下所示：

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

它会生成一个带有以下名称的下拉菜单：“标题 1”、“标题 2”、“正常”、“标题 3”。

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

如何将名称更改为“标题”、“副标题”、“段落”、“小段落”？

Answer 1

如果想继续使用模块和格式选项而不是原始 HTML，您只能更改 CSS。

CSS模式：

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before {
    content: "<new-text-here>";
}

重要的是要注意每个data-value都是您在标头中的值。

Answer 2

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

\n

\r\n

\r\n

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

\r\n

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

\r\n

<!-- Include the Quill library -->\n<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>\n\n<!-- Include stylesheet -->\n<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">\n\n<div id="toolbar">\n  <div class="ql-formats">\n    <select class="ql-header">\n      <option value="1">Title</option>\n      <option value="2">Subheading</option>\n      <option value="3">Small Paragraph</option>\n      <option selected="selected">Normal text</option>\n    </select>\n    <button class="ql-clean"></button>\n  </div>\n</div>\n<div id="editor">\n  <p>Try me...</p>\n</div>

\r\n

\r\n

\r\n

\n

我必须告诉您，不可能将选项设置为 false、正常或标题中的段落。我已经尝试过了，不幸的是，没有出现想要的结果。同样，我也无法告诉你原因。如果你想找出原因，我建议你查看header 源代码。

\n

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

\n

可用于解决您的问题的第二种方法是创建一种新格式。您可以配置这种新格式来接收值，并根据过去的值以不同的方式表现，甚至包括在传递错误值时删除格式本身。这里有一个如何执行此操作的示例。亮点项目（N\xc2\xba 1）拥有您需要的一切。

\n

总之，第一种方法使用两种格式来完成您想要的操作。如果这不是您想要的，我建议您采用第二种方法。即使结果有点复杂，它也能让您准确地实现您想要的目标。

\n