一個對後端程式設計師友 (jian) 好 (dan) 的 Markdown 編輯器 - fanyi8editor

劉榮飛發表於2018-02-05
後端程式設計師

file

簡介

找了挺多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 協議》，轉載必須註明作者和本文連結

相關文章