Markdown編輯器editormd使用過程當中的坑但願你不會遇到

最近用express開發了一個博客，如今一直流行markdown進行文檔編輯，我也用這種方式進行文檔錄入，找到了一個框架editor開始覺得挺簡單，沒想到花了好幾個小時來增長這個功能，由於沒有比較完整的文檔因此踩了不少坑，寫這個也但願你們有前車可鑑。

一、引入方式

languages看你需求，若是沒有能夠不要引入，小編以前只是引用了js和css沒想到還有這麼多模塊文件要引入。

二、path文件目錄
小編渲染是用的swig進行模板渲染的，因此設置了靜態文件目錄在public下面

可是咱們的editormd 的js有的script引入是動態生成的因此目錄找不到，我還特意去看了源碼，結果在參數裏面能夠設置，（下次注意！）

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            path : "../../public/plug/editormd/lib/" //修改文件目錄引用的路徑  mode, codemirror, marked... dependents libs path
        });

三、內容上傳

一開始找不到咱們編輯好的內容到哪裏去取，找了半天也沒找到，後面網上查了一下在那一堆動態的dom裏面有一個

$('.editormd-markdown-textarea').val()

直接查找到這個元素而後經過jq獲取val()
有的朋友可能會有疑問爲啥個人取到的值和我寫的差很少呢？下面咱們仍是講他的內容是如何展現的，咱們提交數據庫的不是帶dom的，咱們能夠經過框架將帶有樣式的文檔解析出來，下面作解釋

四、圖片上傳

editor自帶圖片上傳工具post提交，
這裏要注意的是後端接收請求要返回的參數和獲取的值。
前端配置

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            //啓動本地圖片上傳功能
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/content/img_up", //文件提交請求路徑
            path : "../../public/plug/editormd/lib/" //修改文件目錄引用的路徑  mode, codemirror, marked... dependents libs path
        });

後端接收我用了multer中間件要設置文件接收的參數editormd-image-file

後臺返回也要注意
這是一組固定格式要否則前端會報錯url設置的是最終上傳完的連接，這樣纔會在前端正常的顯示後端能夠保存本地也能夠用七牛 或者阿里雲這種雲存儲

res.json({
    success : 1, 
    message : "上傳成功！",
    url: imageSrc
})

五、markdown內容展現

到這裏就比較簡單了

<div id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </div>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="../../public/plug/editormd/lib/marked.min.js"></script>
<script src="../../public/plug/editormd/lib/prettify.min.js"></script>
<script src="../../public/plug/editormd/lib/raphael.min.js"></script>
<script src="../../public/plug/editormd/lib/underscore.min.js"></script>
<script src="../../public/plug/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../public/plug/editormd/lib/flowchart.min.js"></script>
<script src="../../public/plug/editormd/lib/jquery.flowchart.min.js"></script>
<script src="../../public/plug/editormd/editormd.js"></script>
<script type="text/javascript">
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默認不解析
        flowChart       : true,  // 默認不解析
        sequenceDiagram : true,  // 默認不解析
    });
</script>

完結