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

How do I create a Quill editor without a toolbar?

本文关键字：工具栏 Quill 编辑器 何创建 创建      更新时间：2023-09-26

我想使用Quill但不显示编辑器工具栏(或"bubble"替代选项)。我想要一个文本区，后面有羽毛笔/羊皮纸。

然而，每当我创建一个新的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编辑器短渲染成一个DOM节点，总是display: none。这是真的吗?或者是否有另一种不呈现工具栏的更优雅的方式?

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

(您可以在此JSFiddle中自己使用这些不同的配置选项)

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

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

这是一个用于跟踪的bug报告。

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

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

示例(bubble和snow (default)主题)

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

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

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

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

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

相关文章：