Quill 富文本编辑器 - 无法解释的工具栏行为答案

【问题标题】：Quill rich text editor - unexplainable toolbar behaviorQuill 富文本编辑器 - 无法解释的工具栏行为
【发布时间】：2018-12-01 21:32:49
【问题描述】：

我正在尝试为我正在创建的应用程序启动和运行 Quill。我一直在关注文档和示例，但在尝试实现功能齐全的编辑器时似乎无法获得一致的行为。在处理了一些示例之后，我发现了一个适用于某些功能但不适用于其他功能的示例，otoh，我发现了另一个适用于第一个功能缺失的功能，但不适用于其他功能（我知道很困惑，我将在下面有更多详细信息。）

我处理了这两个示例，将它们删减并尽可能相似，以试图找出差异。当它最终归结为它时，代码中非常细微的差异让我无法解释为什么我得到了我得到的结果。

在第一个示例中，我能够生成一个包含色板和背景色板的工具栏。两者都可以正常工作。但是，没有其他工具栏项出现，例如粗体、斜体、下划线等。

在第二个示例中，我可以生成一个工具栏，其中显示所有预期的工具栏项目。但是，颜色和背景颜色选择菜单仅以原始形式出现，没有样式。此外，选项不会出现任何文本，单击选项不会执行任何操作。

我假设“雪”主题负责显示基本工具。

以下是屏幕截图，按所述顺序排列：

https://postimg.cc/image/ioib9r8qp/

https://postimg.cc/image/4i2kej5ld/

这是让我困惑的部分。这是第一个文件的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Quill Test</title>
  <link rel="stylesheet" href="http://cdn.quilljs.com/1.0.0-rc.4/quill.snow.css" rel="stylesheet">
  <script src="http://cdn.quilljs.com/1.0.0-rc.4/quill.js"></script>

<style>
  #editor-container {
    height: 375px;
    color: #000;
  }
</style>
</head>
<body>

<div id='toolbar-container'>
  <span class="ql-formats">
    <select class="ql-color" title="Colour">
      <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)"/>
    </select>

    <select title="Background Color" class="ql-background" defaultValue="rgb(255, 255, 255)">
      <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)"/>
    </select>
  </span>
</div>

<div id="editor-container">
  <p><br></p>
</div>

<script>
  var quill = new Quill('#editor-container', {
    theme: 'snow',
    modules: {
      toolbar: '#toolbar-container'
    }
  });
</script>

</body>
</html>

第二个文件的代码完全相同，唯一的例外是，在最后的脚本块中是这样的：

<script>
  var quill = new Quill('#editor-container', {
    theme: 'snow'
  });

  quill.addModule('toolbar', {
    container: '#toolbar-container'     // Selector for toolbar container
  });
</script>

显然，在 quill 对象上调用 addModule 和在构造函数中定义 modules 对象之间存在一些区别。然而，对我来说没有意义的是，在这两种情况下，“雪”主题都是在构造函数中定义的，但为什么在第一种情况下它没有被渲染？

【问题讨论】：

标签： quill

【解决方案1】：

好的，我想我已经想通了。首先，我链接的 quill 版本中没有定义 Quill.addModule。

其次，显然，在构造函数中定义 modules 意味着我现在必须在 HTML 中定义工具栏中的所有项目，并将它们中的每一个分配给正确的 ql-类。

显然不定义modules 会呈现一个更基本的工具栏。我想知道是否有可以在构造函数中定义的代码来生成额外的工具栏项（例如，颜色上颚和背景颜色上颚），而不必将它们全部显式地放在 HTML 中。

【讨论】：