vue富文本编辑器中样式冲突和不能修改的问题

在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中滚动条，非常不美观。