quill - 笔管工具栏对齐按钮

Question

我正在尝试将对齐按钮添加到工具栏。我正在使用使用html元素布置工具栏的方法。我想知道的是，是否有可能在工具栏上将对齐按钮表示为离散按钮，而不是放在下拉列表中。

到目前为止，我所看到的所有示例都使用下拉方法。我什至有可能吗？

Answer 1

您可以通过向其添加value属性来添加一个下拉选项作为其自己的按钮，如下所示:

<button class="ql-align" value="center">

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

<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>

<div id="toolbar">
  <span class="ql-formats">
    <button class="ql-align" value=""></button>
    <button class="ql-align" value="center"></button>
    <button class="ql-align" value="right"></button>
    <button class="ql-align" value="justify"></button>
  </span>
</div>
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>