一、下載依賴
官方地址：https://pandao.github.io/editor.md/
二、頁面代碼
1、需要使用到的依賴資源
除了上述資源外，還需要引入jquery.js，該js引入部分需要放置在editormd.min.js引入之前。
2、代碼整合
<html> <head> <title>集成Markdown編輯器測試</title> <link rel="stylesheet" href="./css/editormd.min.css"> <script src="./jquery.js"></script> <script src="./editormd.min.js"></script> <style type="text/css"> .markDownDiv{ z-index: 1 !important } </style> </head> <body> <div id="markDownDiv" class="markDownDiv"> <textarea name="markDownContent" placeholder="請輸入文本內容" style="display: none"></textarea> </div> <body> <script type="text/javascript"> // 初始化編輯器 var markDownEditor; $(function() { // 編輯器名稱要與頁面中應放置的區域id保持一致 markDownEditor = editormd("markDownDiv", { // 寬度 width: 800, // 高度 height: 600, // 滾動條縱向滾動,設置爲false取消滾動 syncScrolling : "single", // lib資源路徑 path: "./lib/", // 編輯器工具欄區域樣式風格 theme: "dark", // 編輯器編輯部分樣式風格 editorTheme: "pastel-on-dark", // 預覽區域樣式風格 previewTheme: "dark", // 開啓表情使用 emoji: true, }); }); </script> </html>
3、效果預覽
