在本页顶部，据称提供了有关如何创建工具栏来控制字体、大小、粗体、斜体、下划线、删除线、文本颜色、背景颜色、列表、项目符号和文本对齐方式的说明。
但是，当我使用示例 HTML 代码时，我会得到一个带有字体大小的下拉菜单，以及一个没有文本或图像的空白按钮，也没有其他控件。
如何准确复制上面页面和主页上显示的完整工具栏？我不想要“粗体”、“斜体”等词。我想要完全如图所示的图标。该文档没有提供有关如何完成此操作的任何线索。在直接查看页面源代码时，似乎在屏幕后面添加了一些 CSS 来记录这一点，但尝试逆向工程并不会削减它。
此外，是否可以通过编程方式生成此工具栏，而不必设置一系列复杂的带有类和标题的嵌套标签等等？我正在使用 Javascript 生成 DOM，尝试将精确的 HTML 格式转换为相应的构造函数调用非常乏味。
有一段 jsx 代码描述了一个 quill 工具栏，使用该代码你应该得到与官方 quill 网站上的第二个示例完全相同的工具栏。我认为这篇文章对那些不想挖掘资源的人会有所帮助。
<div id="full-toolbar" className="toolbar ql-toolbar ql-snow">
<span className="ql-format-group">
<select title="Font" className="ql-font" defaultValue="sans-serif">
<option value="sans-serif">Sans Serif</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
</select>
<select title="Size" className="ql-size" defaultValue="13px">
<option value="10px">Small</option>
<option value="13px">Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select>
</span>
<span className="ql-format-group">
<span title="Bold" className="ql-format-button ql-bold"/>
<span className="ql-format-separator"/>
<span title="Italic" className="ql-format-button ql-italic"/>
<span className="ql-format-separator"/>
<span title="Underline" className="ql-format-button ql-underline"/>
<span className="ql-format-separator"/>
<span title="Strikethrough" className="ql-format-button ql-strike"/>
</span>
<span className="ql-format-group">
<select title="Text Color" className="ql-color" defaultValue="rgb(0, 0, 0)">
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"/>
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"/>
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"/>
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"/>
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"/>
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"/>
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"/>
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"/>
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"/>
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"/>
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"/>
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"/>
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"/>
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"/>
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"/>
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"/>
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"/>
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"/>
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"/>
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"/>
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"/>
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"/>
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"/>
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"/>
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"/>
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"/>
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"/>
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"/>
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"/>
</select>
<span className="ql-format-separator"/>
<select title="Background Color" className="ql-background" defaultValue="rgb(255, 255, 255)">
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"/>
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"/>
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"/>
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"/>
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"/>
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"/>
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"/>
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"/>
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"/>
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"/>
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"/>
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"/>
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"/>
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"/>
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"/>
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"/>
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"/>
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"/>
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"/>
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"/>
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"/>
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"/>
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"/>
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"/>
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"/>
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"/>
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"/>
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"/>
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"/>
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"/>
</select>
</span>
<span className="ql-format-group">
<span title="List" className="ql-format-button ql-list"/>
<span className="ql-format-separator"/>
<span title="Bullet" className="ql-format-button ql-bullet"/>
<span className="ql-format-separator"/>
<select title="Text Alignment" className="ql-align" defaultValue="left">
<option value="left" label="Left"/>
<option value="center" label="Center"/>
<option value="right" label="Right"/>
<option value="justify" label="Justify"/>
</select>
</span>
<span className="ql-format-group">
<span title="Link" className="ql-format-button ql-link"/>
</span>
</div>
对困惑感到抱歉。如果您希望工具栏具有该页面上显示的皮肤，则还需要包含主题和关联的样式表：
<link rel="stylesheet" href="//cdn.quilljs.com/0.20.1/quill.snow.css" />
<script>
var editor = new Quill('#editor', { theme: 'snow' });
editor.addModule('toolbar', {
container: '#toolbar' // Selector for toolbar container
});
</script>
没有它，您仍然可以获得工具栏功能，以便您可以应用自己的样式。
我将更新文档以使这一点更清楚。
对于颜色选择器，需要创建一个<select />包含所有选项的选项。
<select class="ql-color">
<option value="rgb(0, 0, 0)" />
<option value="rgb(230, 0, 0)" />
<option value="rgb(255, 153, 0)" />
<option value="rgb(255, 255, 0)" />
<option value="rgb(0, 138, 0)" />
<option value="rgb(0, 102, 204)" />
<option value="rgb(153, 51, 255)" />
<option value="rgb(255, 255, 255)" />
<option value="rgb(250, 204, 204)" />
<option value="rgb(255, 235, 204)" />
<option value="rgb(204, 224, 245)" />
<option value="rgb(235, 214, 255)" />
<option value="rgb(187, 187, 187)" />
<option value="rgb(102, 185, 102)" />
</select>