wangedit富文本 v-html样式错误
时间: 2023-07-07 07:37:49 浏览: 180
vue通过v-html指令渲染的富文本无法修改样式的解决方案
如果在使用wangedit富文本编辑器时,出现了v-html样式错误,可能是由于富文本编辑器自动转义了HTML标签导致的。具体解决方法如下:
1. 在使用v-html前,先使用v-text将内容转义输出。
2. 在富文本编辑器的配置中,将autoEscape属性设置为false,这样富文本编辑器就不会自动转义HTML标签了。
下面是一个示例代码:
```
<template>
<div>
<div v-text="content"></div>
<div v-html="content"></div>
</div>
</template>
<script>
export default {
data() {
return {
content: '<p style="color: red;">Hello, world!</p>',
}
},
}
</script>
```
在上面的示例代码中,我们先使用v-text将内容转义输出,然后再使用v-html输出。如果不使用v-text,直接使用v-html输出,那么样式会出现错误。另外,也可以在富文本编辑器的配置中将autoEscape属性设置为false,这样就不用在模板中使用v-text了。
阅读全文