摘要:最近用開發了一個博客,現在一直流行進行文檔編輯,我也用這種方式進行文檔錄入,找到了一個框架開始以為挺簡單,沒想到花了好幾個小時來增加這個功能,因為沒有比較完整的文檔所以踩了很多坑,寫這個也希望大家有前車之鑒。
最近用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內容展示
到這里就比較簡單了
完結
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115929.html
摘要:最近用開發了一個博客,現在一直流行進行文檔編輯,我也用這種方式進行文檔錄入,找到了一個框架開始以為挺簡單,沒想到花了好幾個小時來增加這個功能,因為沒有比較完整的文檔所以踩了很多坑,寫這個也希望大家有前車之鑒。 showImg(https://segmentfault.com/img/bV7etM?w=2878&h=1546); 最近用express開發了一個博客,現在一直流行markd...
暫時我還沒有把這個做成一個插件,只是簡單的幾行代碼。其中原理就是通過截圖后,ev.clipboardData 包含了text和圖片文件 數據 原文鏈接:http://blog.oeynet.com/post/7... showImg(https://segmentfault.com/img/remote/1460000010776970); 1.Js監聽paste事件 seajs.use([edi...
暫時我還沒有把這個做成一個插件,只是簡單的幾行代碼。其中原理就是通過截圖后,ev.clipboardData 包含了text和圖片文件 數據 原文鏈接:http://blog.oeynet.com/post/7... showImg(https://segmentfault.com/img/remote/1460000010776970); 1.Js監聽paste事件 seajs.use([edi...
閱讀 823·2021-09-07 09:58
閱讀 2681·2021-08-31 09:42
閱讀 2855·2019-08-30 14:18
閱讀 3086·2019-08-30 14:08
閱讀 1831·2019-08-30 12:57
閱讀 2757·2019-08-26 13:31
閱讀 1298·2019-08-26 11:58
閱讀 1052·2019-08-23 18:06