mavon-editor 保存的html显示问题

xiaoxiao2025-06-27  14

   之前使用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">

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

转载请注明原文地址: https://www.6miu.com/read-5032575.html

最新回复(0)