Question

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

我处理了这两个示例，将它们精简了一下，并使其尽可能相似，以试图找出差异。当最终归结到它时，代码上的细微差别对我来说是很难解释的，为什么我得到了要得到的结果。

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

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

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

以下是屏幕截图，按描述的顺序进行：

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>

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

Answer 1

好的，我想我已经解决了。首先，我链接到的鹅毛笔版本中未定义Quill.addModule。

第二，显然，在构造函数中定义modules意味着我现在必须在HTML中的工具栏中定义所有项目，并将它们分别分配给适当的对象ql- class。

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

鹅毛笔富文本编辑器-无法解释的工具栏行为

1 个答案: