Quill工具栏对齐按钮

Question

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

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

Answer 1

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

<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 2

我建议在工具栏的js中使用简写，所以不要使用自定义的html工具栏。然后通过写作

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

您可以根据@here的答案jhchen定义4个离散对齐按钮。他也有一个很好的例子here。否则我会假设你可以实现相同的html（仅基于查看速记生成的源代码）：

<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>

但是，我诚实地建议你使用速记，它保持一切美观和干净，它确保它的工作原理。此外，它仍然允许您添加自定义按钮（check this）