26

我想使用 Quill 但不显示编辑器工具栏（或“泡沫”替代品）。我基本上想要一个带有 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>

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

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工具栏，除非将其呈现为始终为. 这是真的，还是有另一种更优雅的方式不呈现工具栏？

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

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

4

3 回答 3

52

工具栏的虚假值应该是正确的：

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

这是用于跟踪的错误报告。

于 2016-09-12T20:21:37.147 回答
8

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

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

示例（泡泡和雪（默认）主题）

于 2018-10-18T12:56:11.893 回答
3

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

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

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

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

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

于 2019-02-28T14:10:51.037 回答