vue3使用@vueup/vue-quill富文本编辑器后带标签<p></p>怎么去除
时间: 2024-12-04 16:30:01 浏览: 43
在 Vue3 中使用 `@vueup/vue-quill` 富文本编辑器后,如果你发现插入的内容带有 HTML 标签 `<p>` 等,通常是为了保持内容的原始结构。如果你想去除这些标签,你可以通过配置 Quill 的处理器(Formatters 或 Delta Parsers)来完成。
1. 首先,在你的项目中安装需要的库(如果还没有安装):
```bash
npm install @vueup/vue-quill
```
2. 在你的组件中初始化 Quill,并配置一个自定义的处理器,例如使用 Formatters API:
```javascript
<template>
<vue-quill-editor :options="quillOptions" />
</template>
<script>
import { createEditor } from '@vueup/vue-quill'
export default {
setup() {
const quillOptions = {
modules: {
toolbar: 'ql-align',
formatters: {
// 自定义处理器,移除所有<p></p>等标签
removeHTMLTags: function deltaPrettify(delta) {
return delta.map(function(node) {
if (node.is('html')) {
return { attributes: {}, children: [] };
}
return node;
});
},
},
},
formats: ['bold', 'italic', 'blockquote'],
}
const editor = createEditor(quillOptions)
// 如果你想在组件销毁时恢复Quill到默认状态,可以这样做
onBeforeDestroy(() => {
editor.destroy()
})
return { editor }
},
}
</script>
```
在这个例子中,`removeHTMLTags` 函数会遍历 Quill 的 Delta 对象(表示文档的更改),并移除所有的 `<p>` 标签。记得替换 `onBeforeDestroy` 回调中的部分以适应你的实际需求。
阅读全文