quill富文本编辑器使用教程

Quill 是一个基于浏览器的富文本编辑器，它提供了一种简单、灵活、强大的方式来创建和编辑富文本内容。下面是 Quill 富文本编辑器的使用教程：

1. 引入 Quill 库

首先，在你的 HTML 文件中引入 Quill 库:

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

2. 创建 Quill 实例

在页面中创建一个空的 div 元素，用于 Quill 编辑器的容器：

<div id="editor"></div>

然后，在 JavaScript 中创建一个 Quill 实例：

var quill = new Quill('#editor', {
  theme: 'snow' // 使用 snow 主题
});

3. 添加编辑器内容

在 Quill 编辑器中添加内容可以通过 `setContents` 方法或 `setText` 方法实现。

// 使用 setContents 方法添加内容
quill.setContents([
  { insert: 'Hello World!' }
]);

// 使用 setText 方法添加内容
quill.setText('Hello World!');

4. 监听编辑器内容变化

如果你需要在内容变化时执行一些操作，可以监听 `text-change` 事件：

quill.on('text-change', function(delta, oldDelta, source) {
  console.log('内容已经变化');
});

5. 获取编辑器内容

你可以使用 `getContents` 方法获取 Quill 编辑器中的内容：

var content = quill.getContents();
console.log(content);

6. 获取编辑器纯文本内容

你可以使用 `getText` 方法获取 Quill 编辑器中的纯文本内容：

var text = quill.getText();
console.log(text);

7. 自定义编辑器样式

你可以通过修改 CSS 样式来自定义编辑器的样式，Quill 提供了许多 CSS 类名，用于定制不同的编辑器元素。

例如，你可以修改编辑器的背景颜色：

.ql-editor {
  background-color: #f5f5f5;
}

以上就是 Quill 富文本编辑器的使用教程，希望能对你有所帮助。