Code Editor.md编辑器md转HTML格式的两种方法——彻底解决代码块样式丢失的问题 css bug 更新 博客相关 html 159次访问 12-29 15:52 [Editor.md](https://pandao.github.io/editor.md/ "Editor.md")编辑器是一款开源的MarkDown编辑器。但是在初次使用的时候很容易出错。 从编辑器输入到在主页中显示，即是从“md”格式的文本解析成“HTML”格式的代码块。我们有两种方法进行显示。 - 后台中存储HTML,直接进行展示 - 主页中先加载md格式内容，再将其解析成HTML。 1. 直接引入HTML 官网中提供的便是此[方法](http://editor.md.ipandao.com/examples/form-get-value.html "方法") 添加两个textarea，用于存储md和HTML格式的文本。 ```html <div id="test-editormd"< <textarea style="display:none;" class="form-control" id="content-editormd-markdown-doc" name="content-editormd-markdown-doc"<</textarea< <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" id="content-editormd-markdown-doc"<</textarea< <!-- html textarea 需要开启配置项 saveHTMLToTextarea == true --< <textarea class="editormd-html-textarea" name="test-editormd-html-code" id="test-editormd-html-code"<</textarea< </div< ``` 再添加以下代码， [========] 将其解析成HTML格式，并会把内容存放在上面添加的两个textarea中。后台调用存储即可。 ```html <script src="/editor.md-master/examples/js/jquery.min.js" charset="utf-8"<</script< <script src="/editor.md-master/editormd.min.js" charset="utf-8"<</script< <script type="text/javascript"< var editor; $(function() { editor = editormd("t-e", { width : "90%", height : 920, theme : "single", path : "/xxxx/editor.md-master/lib/", saveHTMLToTextarea : true, // 保存 HTML 到 Textarea toolbarAutoFixed:true,//工具栏自动固定定位的开启与禁用 }); editor.getMarkdown(); // 获取 Markdown 源码 editor.getHTML(); // 获取 Textarea 保存的 HTML 源码 editor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用 }); </script< ``` 通过这种方法，我们可以直接将后台传递来的html代码通过innerHTML显示在页面中。但是会丢失样式，或者说是丢失结构。我们通过检查元素可以发现，在editor编辑器预览的代码块有着完整的pre-ol-li-code-span的结构，而我们在浏览器输出的则仅有pre-code-文本。 1. 加载md解析成HTML 首先引入js包，这里导入的是editormd.css的样式，而不是editormd-min.css。因为后者完全无法编辑。 ```html <script src="/editor.md-master/examples/js/jquery.min.js"<</script< <script src="/editor.md-master/editormd.js"<</script< <script src="/editor.md-master/examples/js/jquery.min.js" charset="utf-8"<</script< <script src="/editor.md-master/editormd.min.js" charset="utf-8"<</script< <script src="/editor.md-master/lib/marked.min.js"<</script< <script src="/editor.md-master/lib/prettify.min.js"<</script< <link rel="stylesheet" href="/editor.md-master/css/editormd.css" /< ``` 然后添加 ```html <div id="doc"< <textarea style="display:none;"<${article.text_md}</textarea< <!--textarea中是md格式的文本--< </div< <script type="text/javascript"< var testEditor; testEditor = editormd.markdownToHTML("doc", {//注意：这里是上面DIV的id htmlDecode: "style,script,iframe", emoji: true, taskList: true, tex: true, // 默认不解析 flowChart: true, // 默认不解析 sequenceDiagram: true, // 默认不解析 codeFold: true, }); </script< ``` 大功告成~效果如下↓ <img src="http://onemorechance.xyz/upload/MyBlog/productImg/c5f91d01-139a-4fee-97c4-ab79bd174666 方法一.jpg" width="900px" height="450px" alt=""> <img src="http://onemorechance.xyz/upload/MyBlog/productImg/218ac464-b373-4cee-9bf7-b8d559c1334c 方法二.jpg" width="900px" height="450px"alt=""> > 不同方法得出不同的解析效果 注意：如果用方法二解析则会多出一个class为ctn_text_over markdown-body editormd-html-preview的div,会导致多出一些我们不想要的样式。我们可以直接修改先前引入的editormd.css文件或使用!important关键字调整样式。 < 这里是2020的第一场雪~ 【2021】 > 刘大大的小秘书 2020-12-29 16:32 Editor.md有一个特性，就是在md文档中支持html代码，我可以用这个特性直接输入元素进行文档排版编辑，也可以手动设置图片的大小、位置。但是这也导致我解析的代码块里的html元素会自动执行。所以以上的代码我都将">"改成了"<"，难顶呀。 让浏览器记住我！
刘大大的小秘书2020-12-29 16:32