Question

我想使用Quill但不显示编辑器工具栏（或＃34; bubble＆＃34;替代方案）。我基本上喜欢用Quill / Parchment支持它的文本区域。

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

默认值：

＆＃13;

var config = {
  "theme": "snow"
};

var quill = new Quill( ".editor", config );

＆＃13;

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

＆＃13;

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

＆＃13;

var config = {
  "theme": "snow",
  "modules": {}
};

var quill = new Quill( ".editor", config );

＆＃13;

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

＆＃13;

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

＆＃13;

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": false
  }
};

var quill = new Quill( ".editor", config );

＆＃13;

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

＆＃13;

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": null
  }
};

var quill = new Quill( ".editor", config );

＆＃13;

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

＆＃13;

这就是我想要的，但这看起来像是一个黑客的解决方法而且我不喜欢它：

＆＃13;

var config = {
  "theme": "snow",
  "modules": {
    "toolbar": ".quill-always-hidden-toolbar"
  }
};

var quill = new Quill( ".editor", config );

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

似乎没有在Quill编辑器上有一个工具栏，而不是将其呈现为始终为display: none的DOM节点。这是真的吗，还是还有另一种更优雅的方法是不渲染工具栏吗？

tl;博士：我不想要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编辑器？

3 个答案: