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

Question

我的 Quill 文本编辑器在构造函数中设置如下：

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

它会生成一个下拉菜单，名称如下：'Heading 1'、'Heading 2'、'Normal'、'Heading 3'。

我想保持附加到这些名称的值/函数相同。我只想将名称更改为：'Title'、'Subheading'、'Paragraph'、'Small Paragraph'.

如何将名称更改为 'Title'、'Subheading'、'Paragraph'、'Small Paragraph'？

Answer 1

事实上，header 行为有些出乎意料。您可以通过两种可能的方式实现您想要的结果。 第一种方法 是使用 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="1">Title</option>
      <option value="2">Subheading</option>
      <option value="3">Small Paragraph</option>
      <option selected="selected">Normal text</option>
    </select>
    <button class="ql-clean"></button>
  </div>
</div>
<div id="editor">
  <p>Try me...</p>
</div>

我必须告诉你，header 中的选项无法设置为 false、normal 或 paragraph。我已经尝试过了，不幸的是，没有出现想要的结果。同样，我也无法告诉你原因。如果你想找出原因，我建议你看看header source code。

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

可用于解决您的问题的第二种方法 是创建一种新格式。您可以配置此新格式以接收值，并根据过去的值以不同的方式运行，这甚至包括在传递错误值时删除格式本身。有一个如何执行此操作的示例 here。精彩项目（第一期）应有尽有

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

Answer 2

如果想继续使用模块和格式选项而不是原始 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 都是您在 header 中的值。

Answer 3

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="1">Title</option>
      <option value="2">Subheading</option>
      <option value="3">Small Paragraph</option>
      <option selected="selected">Normal text</option>
    </select>
    <button class="ql-clean"></button>
  </div>
</div>
<div id="editor">
  <p>Try me...</p>
</div>

****

****

jjj

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

How to change default Heading names in QuillJS (react-js)?

javascript

quill

react-quill