HTML MarkDown編輯器實現
阿新 • • 發佈：2018-12-26
HTML MarkDown編輯器實現
先看效果
我們可以看到只需要在左邊綠色區域輸入，右邊藍色區域就會實時輸入內容。
這樣一個簡單的MarkDown就實現了
程式碼也很簡單：
使用到的js
markdown.js
https://cdn.bootcss.com/markdown.js/0.6.0-beta1/markdown.min.js
使用到的css,主要是為了樣式好看一點
bootstrap.min.css
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css
整個頁面程式碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MarkDown</title> <!--適配手機--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="shortcut icon" href="http://admin.zrstt.cn/group1/M00/00/00/rB_YCFsQ_OmAP6VFAAAQvtuENdk882.ico"> <!--使用bootstrap的樣式，比較好看--> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <style> h1 { font-family: Consolas, monaco, monospace; font-size: 23px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 23px; } h3 { font-family: Consolas, monaco, monospace; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 23px; } p { font-family: Consolas, monaco, monospace; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } blockquote { font-family: Consolas, monaco, monospace; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } pre { font-family: Consolas, monaco, monospace; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } #text-input { margin-left: 4%; padding: 15px; height: 800px; width: 96%; border: none; resize: none; } #preview { padding: 15px; width: 96%; border: none; height: 800px; overflow-y:auto; overflow-x:auto; } body { overflow-x: none; } </style> </head> <body> <center> <h1>MarkDown Edit</h1> </center> <div class="row"> <div class="col-md-6"> <textarea class="bg-success" id="text-input" oninput="this.editor.update()" rows="6">Type **Markdown** here.</textarea> </div> <div class="col-md-6"> <div id="preview" class="bg-primary" rows="6"> </div> </div> </div> <script type="text/javascript" src="js/markdown.min.js"></script> <script> function Editor(input, preview) { this.update = function() { preview.innerHTML = markdown.toHTML(input.value); }; input.editor = this; this.update(); } var $ = function(id) { return document.getElementById(id); }; new Editor($("text-input"), $("preview")); </script> </body> </html>
上面實現的是最簡單，其實，還可以在此基礎上新增一些工具，類似有道雲筆記上面一樣
有需要的可以自行實現