如何完全如样本中所示创建QuillJS工具栏？

Question

在this page的顶部，据说是如何创建工具栏来控制字体，大小，粗体，斜体，下划线，删除线，文本颜色，背景颜色，列表，项目符号，和文本对齐。

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

如何完全复制完整工具栏，如上页和主页上所示？我不想要＆＃34; Bold＆＃34;，＆＃34; Italic＆＃34;等等。我想要完全如图所示的图标。文档没有提供任何关于如何完成此任务的线索。直接查看页面源代码时，屏幕后面会显示一些添加的CSS来记录这一点，但尝试对其进行逆向工程并不会削减它。

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

Answer 1

有一大块jsx代码描述了一个羽毛笔工具栏，你可以在官方羽毛笔网站上找到第二个例子。我认为这篇文章对那些不想挖掘资源的人有用。

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

Answer 2

很抱歉这个混乱。如果您希望工具栏上显示该页面上显示的皮肤，则还需要包含主题和相关样式表：

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

如果没有它，您仍将获得工具栏功能，以便您可以应用自己的样式。

我会更新文档以使其更清晰。

Answer 3

对于颜色选择器，需要创建一个包含所有选项的<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>