怎么把后端获取过来的数据代码通过quill-editor富文本编辑显示在页面上,用代码演示
时间: 2023-11-27 08:49:24 浏览: 71
首先,我们需要将后端获取到的数据赋值给Quill Editor。假设我们的数据格式如下:
```json
{
"title": "这是一篇文章",
"content": "<p>这是文章的内容</p>"
}
```
我们可以使用以下代码将内容显示在Quill Editor中:
```html
<quill-editor ref="editor" :options="editorOption"></quill-editor>
```
```javascript
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: { quillEditor },
data() {
return {
editorOption: {
// 配置Quill编辑器选项
placeholder: '请输入内容'
},
content: '',
}
},
mounted() {
// 将获取到的内容赋值给Quill Editor
this.content = '<p>这是文章的内容</p>'
this.$refs.editor.quill.setContents(this.convertHtmlToDelta(this.content))
},
methods: {
// 将HTML格式的内容转换为Delta格式
convertHtmlToDelta(html) {
const delta = Quill.import('delta')
const converter = Quill.import('core').htmlConverter
return converter.convert(html)
}
}
}
```
在上面的代码中,我们将获取到的HTML格式的内容转换为Delta格式,并使用`setContents`方法将其赋值给Quill Editor。
需要注意的是,我们需要在`mounted`钩子函数中进行赋值操作,因为Quill Editor需要在组件加载完成后才能正确渲染。
阅读全文