在vue项目中,富文本回显通常采用的是v-html指令来渲染html字符串。但是在回显的过程中,发现了一些问题,以此记录下来。
1.富文本(tinyMec)在编辑的时候采用的是iframe隔离,这样的话富文本中编辑的样式就是浏览器原生的样式。但是回显的时候,就会遇到项目中的全局样式所覆盖,导致所见不是所得。

解决:
通过 @import 将浏览器默认样式文件导入到v-html的页面中,并添加scoped

2.通过上一步操作,发现虽然v-html中的内容显示正常了,但是其它页面的样式也出现问题了。

查阅后得出:@import 会从本地服务器中下载该css,并不会添加data-v属性,就会导致全局的污染

3.于是乎,就将该css文件使用style标签的方式引入

这个时候,其它页面的样式不会冲突了,但是富文本的内容显示不正常了
原因: 在vue官方(传送门)对v-html说明了,在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局

简单来说,v-html的内容不是虚拟dom,也就无法应用style标签中的样式。

4.最终解决方式
将v-html渲染的容器封装成一个vue组件,在组件内部通过deep来修改富文本内容。

5.在此之前还是用了iframe标签的srcdoc属性来渲染html字符串。

但是这种方式在iframe中滚动条,非常不美观。

Logo

前往低代码交流专区

更多推荐