使用vue-quill-edito插件,获取content为html格式,并渲染,该怎么做
时间: 2024-03-19 18:45:24 浏览: 219
首先需要安装vue-quill-editor插件,可以使用以下命令进行安装:
```
npm install vue-quill-editor --save
```
安装完成后,在Vue组件中引入vue-quill-editor,并在template中使用`<quill-editor>`标签进行渲染。
在获取content为html格式的时候,可以使用`this.$refs.editor.quill.root.innerHTML`获取编辑器中的html内容,然后使用v-html指令进行渲染。
以下是一个示例代码:
```
<template>
<div>
<quill-editor ref="editor" v-model="content"></quill-editor>
<div v-html="renderedContent"></div>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data () {
return {
content: '',
renderedContent: ''
}
},
watch: {
content () {
this.renderedContent = this.$refs.editor.quill.root.innerHTML
}
}
}
</script>
```
在上面的代码中,我们使用了一个watch监听content的变化,并在变化时获取编辑器中的html内容,并将其渲染到页面上。
阅读全文