vue项目中使用vue-quill-editor 回显文本
时间: 2023-05-10 10:01:44 浏览: 334
详解vue中使用vue-quill-editor富文本小结(图片上传)
在Vue项目中使用vue-quill-editor回显文本,可以通过下面的步骤完成。
1. 安装vue-quill-editor组件:
```
npm install vue-quill-editor --save
```
2. 在需要使用的组件中引入:
```javascript
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
components: {
quillEditor
}
}
```
3. 在模板中使用组件,并在v-model中绑定需要回显的文本:
```html
<quill-editor v-model="editorValue"></quill-editor>
```
4. 在script中定义editorValue变量,并在created钩子函数中通过ajax请求获取数据:
```javascript
<script>
export default {
components: {
quillEditor
},
data() {
return {
editorValue: ''
}
},
created() {
axios.get('url').then(response => {
this.editorValue = response.data.content
}).catch(error => {
console.log(error)
})
}
}
</script>
```
通过以上步骤即可在Vue项目中使用vue-quill-editor回显文本了。
阅读全文