项目使用上拉Editor.md markdown编辑器后,在前端页面上发现所有的样式与预览的样式都丢了,原因是前端样式需要处理后才能正常显示,看看解决办法吧!
以下涉及资源的路径请自行修改具体路径自行
1.引入css
引入<link rel="stylesheet" href="/static/vendor/editor.md/css/editormd.css" />
2.引入js
<script src="/static/js/jquery-1.8.3.min.js"></script>
<script src="/static/vendor/editor.md/editormd.js"></script>
<script src="/static/vendor/editor.md/lib/marked.min.js"></script>
<script src="/static/vendor/editor.md//lib/prettify.min.js"></script>
3.模板引擎渲染html,取出html代码
<div id="my-content">{{$article.content|raw}}</div>,代码为thinkphp6语法
4.js格式化html并显示
$(function () {
editormd.markdownToHTML("my-content");
})
5.最后对比两者的显示差异
未处理前
image.png
处理后显示正常
image.png
参考大佬文章: https://www.jianshu.com/p/02e3065c35d8
