quill - 如何创建完全如示例中所示的 QuillJS 工具栏？

Question

置顶 this page ，据称提供了有关如何创建工具栏以控制字体、大小、粗体、斜体、下划线、删除线、文本颜色、背景颜色、列表、项目符号和文本对齐方式的说明。

但是，当我使用示例 HTML 代码时，我得到了一个带有字体大小的下拉菜单，一个没有文本或图像的空白按钮，也没有其他控件。

如何准确复制上页和主页上显示的完整工具栏？我不想要“粗体”、“斜体”等词。我想要完全如图所示的图标。该文档没有提供有关如何完成此操作的任何线索。在直接查看页面源代码时，似乎在屏幕后面添加了一些 CSS 来记录这一点，但尝试逆向工程并不会削减它。

此外，是否可以以编程方式生成此工具栏，而无需设置一系列复杂的带有类和标题的嵌套标签等等？我正在使用 Javascript 生成 DOM，尝试将精确的 HTML 格式转换为相应的构造函数调用非常繁琐。

Answer 1

有一大段 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>