簡介
找了挺多markdown編輯器，發現太臃腫了，新增功能不是太方便(主要是看不懂那麼高大上的程式碼)，沒發現一個支援貼上上傳圖片和拖拽的。索性自己搞一個，由於作者只是一個後端程式設計師，js功底有限，所以只是實現了基本的功能，保證基本夠用。此外就是js程式碼足夠簡單，基本後端程式設計師都可以看懂。
https://github.com/noxue/fanyi8editor
目前功能
- 剪貼簿貼上上傳圖片
- 拖拽上傳檔案
- 語法高亮
使用文件
Alt+1~6 對應 h1~h6
Alt+B 加粗選中的內容
Alt+I 插入圖片（I表示img標籤）
Alt+A 插入連結（A表示a標籤）
Alt+H 插入橫線（H表示hr標籤）
Alt+L 插入線條（L表示Line,和hr的區別是，線條上方的文字會變成h2）
Alt+T 插入表格（T 表示Table）
建立編輯器
<div style="width:100%; height:100%;" id="editor">
<textarea name="content" cols="30" rows="10"></textarea>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="http://127.0.0.10/fanyi8editor.js"></script>
<script>
var editor = new FanYi8Editor("#editor", {
//如果不配置upload，則不能上傳圖片
upload: {
//上傳地址
url: "/upload.php",
//自定義的檔案提交的名稱，後端根據這個獲取檔案
name: "image",
//自定義的鍵值對json，或者一個函式返回這樣的json，通過post一起提交
//配置函式的區別是，每次提交都會呼叫函式，如果引數值是每次都會變化的，就用函式，比如七牛上傳的時候要獲取token）
//kvs: {
// k1: "v1",
// k2: "v2"
//}
}
});
</script>- 必須在引入 fanyi8editor.js 之前引入jquery
- textarea不是必須，如果你需要使用普通的post提交的話，就可以加上textarea，markdown內容會自動更新到textarea裡面。textarea的初始值也會自動設定到編輯器。
編輯器公開函式
getMarkdown()
獲取編輯器種的markdown內容
setMarkdown(markdownContent)
把內容設定到編輯器
getHtml()
獲取編輯器解析後的html程式碼
markdown轉html顯示處理
請參考view.html的原始碼
若有任何疑問，請到不學網提問 http://www.noxue.com/f-wenda-1.html
作者：劉榮飛
QQ:30670835
本作品採用《CC 協議》，轉載必須註明作者和本文連結