之前使用mavon-editor作为富文本编辑器,保存之后,在vue中直接使用v-html对返回的html数据进行展示。

   预期的结果:

           本应该和编辑过程中预览框里的样式相同。

  实际结果:

           没有任何样式。

  查找问题:

       1.第一次尝试

                感觉应该是引入问题,but,仔细查看了很多遍,引入没有任何问题。。。

       2.第二次尝试

               在文档中看到了这句话:

               代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载. github-markdown-csskatex仅会在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">

 最后样式终于显示了,不过这个方法有点一刀切了,有其他比较好的方式的小伙伴,欢迎留言。

Logo

前往低代码交流专区

更多推荐