我正在尝试将对齐按钮添加到工具栏中。我使用html元素布局工具栏的方法。我想知道的是,是否可以将对齐按钮表示为工具栏上的离散按钮,而不是在下拉列表中。
到目前为止,我见过的所有示例都使用了下拉方法。即使可能,我还能做什么?
答案 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'
}
});
<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;
答案 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>