mavon-editor 保存的html显示问题

23 篇文章 0 订阅

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

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

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值