Markdown 編輯器 Editor.md 預覽
一、效果
二、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editor在線預覽</title>
<style>
body{
margin-left: 20px;
margin-right: 30px;
width: 80%;
text-align: center;
}
</style>
<!-- 引入editormd的css -->
<link rel="stylesheet" href="https://pandao.github.io/editor.md/css/editormd.min.css" />
</head>
<body>
<!-- 定義markDown插件掛載容器 START -->
<div id="markdown-editor">
<!-- 編輯器的內容 START -->
<textarea id="content1" style="display:none;">
### 關於 Editor.md
```
**Editor.md** 是一款開源的、可嵌入的 Markdown 在線編輯器（組件），基於 CodeMirror、jQuery 和 Marked 構建。
```
**加粗**
*斜體*
```
<?php
echo '你好';
```
## 我之前寫的幾篇 - 傳送門
[Markdown 編輯器 Editor.md 使用](https://blog.csdn.net/qq_36025814/article/details/105773373 "Markdown 編輯器 Editor.md 使用")
[Markdown 編輯器 Editor.md 圖片上傳使用](https://blog.csdn.net/qq_36025814/article/details/105773740 "Markdown 編輯器 Editor.md 圖片上傳使用")
</textarea>
<!-- 編輯器的內容 END -->
</div>
<!-- 定義markDown插件掛載容器 END -->
</body>
<!-- 這裏的引入順序不能改變，先引入jquery，再引入 editormd，
否則可能報錯 [ ReferenceError: Zepto is not defined ] [ ReferenceError: editormd is not defined ] -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 預覽時需要引入marked.js，否則報錯 [ ReferenceError: marked is not defined ] -->
<script src="https://pandao.github.io/editor.md/lib/marked.min.js"></script>
<!-- 預覽時需要引入prettify.js，否則報錯 [ ReferenceError: prettyPrint is not defined ] -->
<script src="https://pandao.github.io/editor.md/lib/prettify.min.js"></script>
<!-- 解析 flowChart，sequenceDiagram 等需要的js -->
<!--
<script src="https://pandao.github.io/editor.md/lib/raphael.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/underscore.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/sequence-diagram.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/flowchart.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/jquery.flowchart.min.js"></script>
-->
<!--
這裏因爲直接引用線上的地址，非常慢，爲了快速的展示效果，註釋了一些引入。
如果你實際用到了：流程圖啊，sequenceDiagram 這些，就需要打開。
我註釋的這些js，由於下面配置了 [ flowChart: true ], 所以是會報錯的：
[ TypeError: div.find(...).flowChart is not a function ]
-->
<script src="https://pandao.github.io/editor.md/editormd.js"></script>
<script>
let mkEditor
mkEditor = editormd.markdownToHTML("markdown-editor", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默認不解析
flowChart : true, // 默認不解析
sequenceDiagram : true, // 默認不解析
});
</script>
</html>
三、注意：
js直接引入的第三方線上地址，如果能加載成功（目前是能加載成功[2020-04-27]），該代碼直接複製可用。
需要注意的地方都在代碼裏註釋了。
四、傳送門
五、參考地址