Quill工具栏对齐按钮

时间:2017-11-21 17:17:34

标签: quill

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

到目前为止,我见过的所有示例都使用了下拉方法。即使可能,我还能做什么?

3 个答案:

答案 0 :(得分:5)

我建议在工具栏的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

答案 1 :(得分:4)

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

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

&#13;
&#13;
<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>
&#13;
{{1}}
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以将select标记与option一起使用进行下拉。将select与类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>