前端使用vue+elementui的vue-editor富文本组件,保存的内容为html格式的,保存后查找出数据怎么在富文本框展示
时间: 2023-12-14 21:39:00 浏览: 96
可以使用v-html指令将保存的html内容渲染到富文本框中,具体步骤如下:
1. 在Vue组件中,使用v-html指令将保存的html内容渲染到富文本框中,例如:
```html
<template>
<div class="editor">
<div v-html="content"></div>
</div>
</template>
<script>
export default {
data() {
return {
content: '<p>这里是保存的html内容</p>'
}
}
}
</script>
```
2. 在使用vue-editor富文本组件的地方,将绑定的数据设置为保存的html内容,例如:
```html
<template>
<div>
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
export default {
data() {
return {
content: '<p>这里是保存的html内容</p>'
}
}
}
</script>
```
这样就可以在富文本框中展示保存的html内容了。需要注意的是,使用v-html指令会将内容解析为HTML,因此要确保内容是安全的,以避免XSS攻击。
阅读全文