如何创建没有工具栏的 Quill 编辑器？

Question

我想使用 Quill 但不显示编辑器工具栏（或 "bubble" 替代方案）。我基本上想要一个带有 Quill/Parchment 支持的文本区域。

但是，每当我创建一个新的 Quill 元素时，我总是会看到工具栏，即使我没有要求它。此外，删除工具栏会导致 JavaScript 错误，从而破坏页面上的任何其他内容运行。

默认值：

var config = {
  "theme": "snow"
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

将模块设置为空对象也是一样的（我相信这是默认设置）：

var config = {
  "theme": "snow",
  "modules": {}
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

将工具栏模块设置为 false 或 null 会导致 JavaScript 错误：

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": false
  }
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": null
  }
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

这就是我想要的，但这似乎是一个棘手的解决方法，我不喜欢它：

var config = {
  "theme": "snow",
  "modules": {
    "toolbar": ".quill-always-hidden-toolbar"
  }
};

var quill = new Quill( ".editor", config );

.quill-always-hidden-toolbar{
  display: none;
  visibility: hidden;
  width: 0;
  height: 0;
}

.quill-always-hidden-toolbar.ql-toolbar.ql-snow + .ql-container.ql-snow{
  border-top: 1px solid #ccc;
}

<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>

<div class="quill-always-hidden-toolbar"></div>
<div class="editor"></div>

似乎没有办法不在 Quill 编辑器上有一个工具栏，除非将它渲染到一个总是 display: none 的 DOM 节点。这是真的吗，或者 是否有另一种不呈现工具栏的更优雅的方式？

tl;dr：我不想要 Quill 工具栏，如何创建没有工具栏的新 Quill 实例？

（您可以在 this JSFiddle 上自己使用这些不同的配置选项）

Answer 1

工具栏的错误值应该是正确的：

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": false
  }
};

这里有一个 bug report 用于跟踪。

Answer 2

您可以设置主题 bubble 以显示类似媒体的编辑器而不是始终可见的版本；

var quill = new Quill('#editor', {
  theme: 'bubble'   // Specify theme in configuration
});

Examples（气泡和雪（默认）主题）

Answer 3

您可以采用两种不同的方法。第一个只是在选项中传递一个假值。

var config = {
  modules: {
      toolbar: false,
      syntax: true
  },
  "theme": "snow",
};

另一方面，您也可以使用完全没有工具栏的前缀主题。

var config = {
  "theme": "bubble",
};

我使用的所有文本编辑器都有一个没有可用工具栏的前缀主题。

如何创建没有工具栏的 Quill 编辑器？

How do I create a Quill editor without a toolbar?

javascript

quill