vue-quill-editor html如何回显到编辑器上
时间: 2023-08-14 18:03:25 浏览: 297
浅谈vue中使用编辑器vue-quill-editor踩过的坑
如果您想将已经保存的 HTML 内容回显到 vue-quill-editor 编辑器上,可以使用以下步骤:
1. 安装依赖
```bash
npm install quill@1.3.7 vue-quill-editor@3.0.6
```
2. 导入依赖
```javascript
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.snow.css' // 引入样式
Vue.use(VueQuillEditor)
```
3. 创建一个基本的编辑器
```html
<template>
<div>
<quill-editor v-model="content" ref="myQuillEditor"></quill-editor>
<button @click="save">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
content: '<p>这是一段已经保存的 html 内容</p>'
}
},
methods: {
save() {
console.log(this.content) // 打印保存的内容
}
}
}
</script>
```
通过将已经保存的 html 内容绑定到 `v-model` 上,即可将内容回显到编辑器上。如果你需要获取编辑器中当前的 html 内容,可以通过 `this.$refs.myQuillEditor.quill.root.innerHTML` 获取。
阅读全文