Quill 工具栏对齐按钮

Question

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

到目前为止，我看到的所有示例都使用了下拉菜单方法。我所追求的可能吗？

Answer 1

我建议在工具栏中使用 js 中的 shorthand，而不是使用自定义 html 工具栏。然后写

toolbar: [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]

您可以根据答案 by @jhchen. He also has a nice example here 定义 4 个离散对齐按钮。否则我假设你可以通过 html 实现相同的效果（仅基于查看 shorthand 生成的源代码）：

<span class="ql-formats">
  <button type="button" class="ql-align" value="">
    <svg viewBox="0 0 18 18"> 
      <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
    </svg>
  </button>
  <button type="button" class="ql-align" value="center">
    <svg viewBox="0 0 18 18">
      <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
    </svg>
  </button>
  <button type="button" class="ql-align" value="right">
    <svg viewBox="0 0 18 18"> 
      <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
    </svg>
  </button>
  <button type="button" class="ql-align" value="justify">
    <svg viewBox="0 0 18 18">
      <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
      <line class="ql-stroke" x1="15" x2="3" y1="14" y2="14"></line>
      <line class="ql-stroke" x1="15" x2="3" y1="4" y2="4"></line>
    </svg>
  </button>
</span>

但是，老实说，我建议您使用 shorthand，它可以使一切保持整洁，并确保其正常工作。此外，它仍然允许您添加自定义按钮 (check this)

Answer 2

您可以通过向其添加 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>

Answer 3

您可以将 select 标签与 option 一起用于下拉菜单。使用 select 和 class ql-align 及其内部添加每个 option 值属性分别为 ""、"center"、"right" 和 "justify"。

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

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

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

Answer 4

只需将以下行添加到您的 Quill 工具栏 html，Quill 会处理剩下的事情。

<select class="ql-align"></select>

Quill 工具栏对齐按钮

Quill toolbar alignment buttons

quill