记一次解决 quill(vue-quill-editor) 编辑器中莫名多出一行“<p><br></p>”的过程...
时间: 2023-11-16 20:13:49 浏览: 45
好的,下面是解决步骤:
1. 首先需要明确问题:在使用 `vue-quill-editor` 编辑器时,输入文字后,会自动多出一行空白的 `<p><br></p>` 标签。
2. 查阅官方文档,发现可以通过 `options` 属性来配置 quill。根据官方文档,可以设置 `modules` 属性中的 `toolbar` 和 `clipboard` 的值,并且可以自定义 `onPaste` 方法。
3. 由于多出的空白标签是在用户输入文字之后自动生成的,因此猜测可能是 `clipboard` 模块导致的问题。于是在 `options` 中将 `clipboard` 模块禁用:
```js
options: {
modules: {
toolbar: [...],
clipboard: false
},
...
}
```
4. 经过测试,发现禁用 `clipboard` 模块后,问题得到解决,不再出现多出的空白标签。但是由于禁用了 `clipboard` 模块,无法进行粘贴操作。
5. 解决粘贴问题:根据官方文档,可以通过自定义 `onPaste` 方法来处理粘贴内容。在该方法中,可以对粘贴的内容进行处理,例如去除多余的标签、格式化等。
```js
options: {
modules: {
toolbar: [...],
clipboard: {
// 禁用默认的处理粘贴内容的方法
matchVisual: false,
// 自定义 onPaste 方法
onPaste: function (e) {
// 获取粘贴的内容
const clipboardData = e.clipboardData || window.clipboardData;
const pastedData = clipboardData.getData('text/html') || clipboardData.getData('text/plain');
// 对粘贴的内容进行处理
const sanitizedHTML = sanitizeHtml(pastedData, {
allowedTags: [...],
allowedAttributes: {...}
});
// 将处理后的内容插入到编辑器中
const range = this.quill.getSelection();
this.quill.clipboard.dangerouslyPasteHTML(range.index, sanitizedHTML);
}
}
},
...
}
```
6. 在 `onPaste` 方法中,我们首先获取粘贴的内容,然后使用第三方库 `sanitize-html` 对其进行处理,并将处理后的内容插入到编辑器中。
7. 经过测试,发现通过自定义 `onPaste` 方法,可以解决粘贴问题,并且不会再出现多余的空白标签。