如何在没有工具栏的情况下创建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编辑器上没有工具栏，只能将其呈现为始终display: none的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
});

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

Answer 3

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

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

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

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

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