怎么把后端获取过来的数据代码通过quill-editor富文本编辑显示在页面上
时间: 2023-11-27 08:49:14 浏览: 45
你可以使用 `quill-editor` 的 `setContents` 方法来将后端获取的数据渲染到富文本编辑器中。具体实现步骤如下:
1. 在组件中引入 `quill-editor` 组件:
```javascript
import { quillEditor } from 'vue-quill-editor'
```
2. 在模板中使用 `quill-editor` 组件,并为其绑定 `:content` 属性(即后端获取的数据):
```html
<template>
<quill-editor ref="myQuillEditor" :content="content" :options="editorOption"></quill-editor>
</template>
```
3. 在组件的 `created` 钩子中,通过后端 API 获取数据,并将获取到的数据赋值给组件的 `content` 属性:
```javascript
export default {
data() {
return {
content: '',
editorOption: {...} // quill-editor 的配置项
}
},
created() {
// 通过后端 API 获取数据
axios.get('/api/content')
.then(response => {
this.content = response.data.content
this.$nextTick(() => {
// 将获取到的数据渲染到富文本编辑器中
this.$refs.myQuillEditor.quill.setContents(JSON.parse(this.content))
})
})
.catch(error => {
console.log(error)
})
}
}
```
4. 在 `quill-editor` 的配置项中,设置 `readOnly` 属性为 `true`,以避免用户对已有内容进行编辑:
```javascript
editorOption: {
readOnly: true,
// 其他配置项...
}
```
这样,就可以将后端获取的数据通过 `quill-editor` 渲染到页面上了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)