之前使用mavon-editor作为富文本编辑器,保存之后,在vue中直接使用v-html对返回的html数据进行展示。
预期的结果:
本应该和编辑过程中预览框里的样式相同。
实际结果:
没有任何样式。
查找问题:
1.第一次尝试
感觉应该是引入问题,but,仔细查看了很多遍,引入没有任何问题。。。
2.第二次尝试
在文档中看到了这句话:
代码高亮highlight.js
中的语言解析文件和代码高亮样式将在使用时按需加载. github-markdown-css
和katex
仅会在mounted
时加载。
好像抓到了重点,只有在使用了<mavon-editor/>的地方,样式才会引入。
最后,使用了一个笨方法,通过cdn的方式把样式引入,并且在展示html的div上添加 markdown-body这个class。
并且还需要引入import "mavon-editor/dist/css/index.css";在你需要展示html的模块。
<div
class="markdown-body"
v-html="notifyDetailInfo.content"/>
<link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css" rel="stylesheet">
最后样式终于显示了,不过这个方法有点一刀切了,有其他比较好的方式的小伙伴,欢迎留言。