如何在没有工具栏的情况下创建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>

这是我想要的,但这似乎是一个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编辑器上没有工具栏,只能将其呈现为始终的DOM节点display: none.这是真的,还是有另一种更优雅的方式来渲染工具栏？

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

(你可以在这个JSFiddle上自己玩这些不同的配置选项)

Answer 1

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

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

这是一个用于跟踪的错误报告.

Answer 2

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

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

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