推薦一款超讚的 Markdown 在線編輯器組件

Hi！你們好呀！我是大家努力的喵哥！javascript

前段時間，給你們推薦了既見既所得的開源 Markdown 編輯器 Mark Text。Mark Text 是本地軟件，內容都是存儲在本地的。因此不少朋友就在問，有沒有推薦的在線或者能進行雲端存儲的 Markdown 編輯器。原本是給你們推薦馬克飛象的，可是好像不少同窗，如今對國區印象筆記並不太承認。後來，給你們建議直接使用簡書之類的，支持 Markdown 的內容平臺。可是你們又廣泛認爲簡書的 Markdown 編輯器字體不適合寫技術類文章。看來你們的要求還挺高。css

正好這兩天，有個小夥伴在找適合博客的富文本插件。對於，技術類文章 Markdown 固然是比富文本更優雅的選擇。因此喵哥，就去找了一款 Markdown 編輯器組件，推薦給朋友。朋友使用後，反響不錯。因此，這裏也推薦給上面那些挑剔的朋友，既然推薦這麼多大家都不喜歡，又這麼喜歡折騰。那麼，本身擼一個如何？前端

固然這是玩笑話。要自建支持 Markdown 的博客，仍是得推薦 Hexo 加 Github Pages 的組合。爲何要推薦這款 Markdown 編輯器組件？主要是簡單，具備學習價值，還有就是方便你們在設計內容系統時，快速使用。java

這款組件就是 editor.md。editor.md 是一款開源的、可嵌入的 Markdown 在線編輯器組件。editor.md 是基於 CodeMirror、jQuery 和 Marked 構建的。其給個人第一印象是使用簡單。做爲在線編輯器，簡潔明瞭。做爲組件，幾行代碼便可打造一款在線 Markdown 編輯器。同時，喵哥印象中，國內同類組件中，editor.md 應該是完成度最高，支持內容最廣的了。jquery

主要特性git

支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 風格的語法，也可變身爲代碼編輯器。程序員
支持實時預覽、圖片（跨域）上傳、預格式文本/代碼/表格插入、代碼摺疊、跳轉到行、搜索替換、只讀模式、自定義樣式主題和多語言語法高亮等功能。github
支持 ToC（Table of Contents）、Emoji表情、Task lists、@連接等 Markdown 擴展語法。算法
支持 TeX 科學公式（基於 KaTeX）、流程圖 Flowchart 和時序圖 Sequence Diagram。npm
支持識別和解析 HTML 標籤，而且支持自定義過濾標籤及屬性解析，具備可靠的安全性和幾乎無限的擴展性。
支持 AMD / CMD 模塊化加載（支持 Require.js & Sea.js），而且支持自定義擴展插件。
兼容主流的瀏覽器（IE8+）和 Zepto.js，且支持 iPad 等平板設備。

安裝

NPM 安裝 :

npm install editor.md

Bower 安裝 :

bower install editor.md

使用

1.添加對應的引用。

<link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />//依賴jquery<script type="text/javascript" src="lib/js/jquery.min.js"></script><script src="lib/js/editor.md-master/editormd.min.js"></script>//須要這三個文件

2.在展現的頁面，加上對應 id。

<div id="layout" class="editor"> <div id="test-editormd"> <textarea></textarea> </div></div>

3.爲編輯器設置參數。

var testEditor;testEditor = editormd("test-editormd", { placeholder:'本編輯器支持Markdown編輯，左邊編寫，右邊預覽', //默認顯示的文字，這裏就不解釋了 width: "90%", height: 640, syncScrolling: "single",  path: "lib/js/editor.md-master/lib/", //你的path路徑（原資源文件中lib包在咱們項目中所放的位置） theme: "dark",//工具欄主題 previewTheme: "dark",//預覽主題 editorTheme: "pastel-on-dark",//編輯主題    saveHTMLToTextarea: true, emoji: false, taskList: true,  tocm: true, // Using [TOCM] tex: true, // 開啓科學公式TeX語言支持，默認關閉 flowChart: true, // 開啓流程圖支持，默認關閉 sequenceDiagram: true, // 開啓時序/序列圖支持，默認關閉, toolbarIcons : function() { //自定義工具欄，後面有詳細介紹 return editormd.toolbarModes['simple']; // full, simple, mini },});