2

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

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

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

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

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

4

3 回答 3

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都是您在标题中的值。

于 2020-07-14T18:40:58.113 回答
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="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>

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

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

可用于解决您的问题的第二种方法是创建一种新格式。您可以将这种新格式配置为接收值，并根据过去的值以不同的方式运行，甚至包括在传递错误值时删除格式本身。这里有一个如何做到这一点的例子。亮点项目 (Nº 1) 拥有您需要的一切。

总之，第一种方法使用两种格式来做你想做的事。如果不希望这样，我建议您采用第二种方法。即使事实证明它有点复杂，它也可以让你准确地实现你想要的。

于 2020-01-29T13:26:06.530 回答
0 

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

于 2021-02-11T11:32:22.847 回答