项目使用上拉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