quilleditor隐藏工具栏
时间: 2023-09-12 07:04:23 浏览: 347
compo-quillEditor:Quill 编辑器组件包装器
要在 Quill Editor 中隐藏工具栏,你可以使用以下代码:
```javascript
var toolbarOptions = [
['bold', 'italic', 'underline'], // 加粗、斜体、下划线
['blockquote', 'code-block'], // 引用、代码块
[{ 'header': 1 }, { 'header': 2 }], // 标题
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 有序列表、无序列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 下标、上标
[{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
[{ 'direction': 'rtl' }], // 文字方向
[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 自定义标题
[{ 'color': [] }, { 'background': [] }], // 文字颜色、景色
[{ 'font': [] }], // 字体
[{ 'align': [] }], // 对齐方式
['clean'] // 清除格式
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions // 将工具栏选项传入 Quill 初始化配置中
},
theme: 'snow' // 使用 snow 主题,可以选择其他主题
});
quill.getModule('toolbar').container.style.display = 'none'; // 隐藏工具栏
```
在上面的代码中,首先定义了一个 `toolbarOptions` 数组,其中包含了你想要显示的工具栏选项。然后,通过传入 `toolbarOptions` 到 Quill 初始化配置的 `modules.toolbar` 中,来创建一个带有指定工具栏的 Quill 编辑器实例。最后,使用 `quill.getModule('toolbar').container.style.display = 'none'` 将工具栏隐藏起来。
确保在页面加载完成后执行以上代码,或者将其放在 `<script>` 标签内,并放在页面底部,以确保能够正确获取到 `#editor` 元素。
阅读全文