Markdown編輯器editormd使用過程中的坑希望你不會遇到

Julylovin 發布于2019-08-22 15:52 / 2607人閱讀

摘要：最近用開發了一個博客，現在一直流行進行文檔編輯，我也用這種方式進行文檔錄入，找到了一個框架開始以為挺簡單，沒想到花了好幾個小時來增加這個功能，因為沒有比較完整的文檔所以踩了很多坑，寫這個也希望大家有前車之鑒。

最近用express開發了一個博客，現在一直流行markdown進行文檔編輯，我也用這種方式進行文檔錄入，找到了一個框架editor開始以為挺簡單，沒想到花了好幾個小時來增加這個功能，因為沒有比較完整的文檔所以踩了很多坑，寫這個也希望大家有前車之鑒。

1、引入方式

languages看你需求，如果沒有可以不要引入，小編之前只是引用了js和css沒想到還有這么多模塊文件要引入。

2、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
        });

3、內容上傳

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

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

直接查找到這個元素然后通過jq獲取val()
有的朋友可能會有疑問為啥我的取到的值和我寫的差不多呢？下面我們還是講他的內容是如何展示的，我們提交數據庫的不是帶dom的，我們可以通過框架將帶有樣式的文檔解析出來，下面做解釋

4、圖片上傳

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
})

5、markdown內容展示

到這里就比較簡單了


            {{content.content}}

完結

GPU云服務器云服務器你不會 markdown在線編輯器在工作遇到 ddos 攻擊你是如何解決的使用遇到問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93825.html

Markdown編輯器editormd使用過程中的坑希望你不會遇到

摘要：最近用開發了一個博客，現在一直流行進行文檔編輯，我也用這種方式進行文檔錄入，找到了一個框架開始以為挺簡單，沒想到花了好幾個小時來增加這個功能，因為沒有比較完整的文檔所以踩了很多坑，寫這個也希望大家有前車之鑒。 showImg(https://segmentfault.com/img/bV7etM?w=2878&h=1546); 最近用express開發了一個博客，現在一直流行markd...

everfight 2019-08-30 14:18 評論0 收藏0
Editor.md和markdown實現Sg一樣的截圖粘貼上傳

暫時我還沒有把這個做成一個插件，只是簡單的幾行代碼。其中原理就是通過截圖后，ev.clipboardData 包含了text和圖片文件數據原文鏈接：http://blog.oeynet.com/post/7... showImg(https://segmentfault.com/img/remote/1460000010776970); 1.Js監聽paste事件 seajs.use([edi...

weij 2019-08-21 12:03 評論0 收藏0
Editor.md和markdown實現Sg一樣的截圖粘貼上傳

暫時我還沒有把這個做成一個插件，只是簡單的幾行代碼。其中原理就是通過截圖后，ev.clipboardData 包含了text和圖片文件數據原文鏈接：http://blog.oeynet.com/post/7... showImg(https://segmentfault.com/img/remote/1460000010776970); 1.Js監聽paste事件 seajs.use([edi...

jollywing 2019-06-28 13:29 評論0 收藏0