Markdown是一種可以使用普通文字編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式，就像我們使用的CSDN Markdown編輯器一樣。下面我們利用開源的Editor.md來構建屬於我們自己的Markdown編輯器。

0x01 下載檔案

官網：http://pandao.github.io/editor.md

其中最關鍵的兩個檔案是editormd.css和editormd.js。同時資料夾lib和plugins也需要在工程中引入。如果發現有圖示顯示不正常，還要引入font資料夾，最終的結構如下圖：

0x02 配置模板

引入檔案：

{%block styles%}
 
{{super()}}
    <link rel="stylesheet" href="{{url_for('static',filename='css/editormd.min.css')}}">
{%endblock%}
{%block scripts%}
{{super()}}
    <script src="{{url_for('static',filename='js/editormd.min.js')}}"></script>
{%endblock%}

新增如下的js程式碼：

<script>
        var testEditor;
        $(function
 
(){
            testEditor=editormd("test-editormd",{
                width:'500px',
                height:'300px',
                syncScrolling : "single",
                path:"{{url_for('static',filename='editormd/lib/')}}",
                //啟動本地圖片上傳功能
                imageUpload:true,
                imageFormats   : ["
 
jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "{{url_for('main.upload')}}"
            });
        })
    </script>

在模板中新增關聯的textarea：

<form method="post">
    {{form.hidden_tag()}}
    <div id="test-editormd" class="form-control">
        {{form.body(class="form-control",style="display:none;",id="ts")}}
    </div>
    <button type="submit" class="btn btn-primary form-control">提交</button>
</form>

這樣，我們就完成了客戶端的配置。

0x03 服務端實現

首先我們在對應的資料表中新增一個新的欄位，用來記憶Markdown格式轉換為html後的內容，這樣做可以方便客戶端顯示。

…
body_html=db.Column(db.Text)
…
#處理body欄位變化的函式
@staticmethod
def on_changed_post(target,value,oldvalue,initiaor):
    allow_tags=['a','abbr','acronym','b','blockquote','code',
                'em','i','li','ol','pre','strong','ul',
                'h1','h2','h3','p','img']
    #轉換markdown為html，並清洗html標籤
    target.body_html=bleach.linkify(bleach.clean(
        markdown(value,output_form='html'),
        tags=allow_tags,strip=True,
        attributes={
            '*': ['class'],
            'a': ['href', 'rel'],
            'img': ['src', 'alt'],#支援<img src …>標籤和屬性
        }
))

#註冊監聽事件
db.event.listen(Posts.body,'set',Posts.on_changed_post)

on_changed_post函式註冊在body欄位上，作為SQLAlchemy的”set”時間監聽程式，當body欄位發生變化時，將觸發函式，從而完成對應的body_html欄位的更新。這樣可以高效地完成markdown格式到html格式的轉換。

上面的函式中還使用了bleach來過濾html標籤，只允許指定的標籤存在，這樣是為了防止出現惡意的程式碼，避免XSS等漏洞的出現。

對應的路由處理程式碼沒有什麼特別的地方，和前面講解分頁過程差不多（參見：利用SQLAlchemy和Bootstrap實現資料分頁顯示），下面補充講下圖片上傳的處理問題。

0x04 補充：圖片上傳

上面提到了Editor.md客戶端啟動圖片上傳的做法：

//啟動本地圖片上傳功能
imageUpload:true,
imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "{{url_for('main.upload')}}"

在Editor.md中，啟動圖片上傳功能後，相應的對話方塊採用Ajax傳送圖片資訊，並接收特定格式的Json字串作為合法的返回結果：

{
    success : 0 | 1,           // 0 表示上傳失敗，1 表示上傳成功
    message : "提示的資訊，上傳成功或上傳失敗及錯誤資訊等。",
    url     : "圖片地址"        // 上傳成功時才返回
}

上面的處理過程指定需要main.upload來進行圖片上傳處理，相應的程式碼如下：

# 圖片上傳處理
@main.route('/upload/',methods=['POST'])
def upload():
    file=request.files.get('editormd-image-file')
    if not file:
        res={
            'success':0,
            'message':u'圖片格式異常'
        }
    else:
        ex=os.path.splitext(file.filename)[1]
        filename=datetime.now().strftime('%Y%m%d%H%M%S')+ex
        from app import app
        file.save(os.path.join(app.config['SAVEPIC'],filename))
        #返回
        res={
            'success':1,
            'message':u'圖片上傳成功',
            'url':url_for('.image',name=filename)
        }
    return jsonify(res)

#編輯器上傳圖片處理
@main.route('/image/<name>')
def image(name):
    with open(os.path.join(app.config['SAVEPIC'],name),'rb') as f:
        resp=Response(f.read(),mimetype="image/jpeg")
    return resp

效果如下：

同時圖片也被儲存到伺服器了。

這樣，我們就可以構建一個比較完整的Markdown編輯器了。先就講到這裡吧，以後有時間在慢慢改進！