成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Markdown編輯器editormd使用過(guò)程中的坑希望你不會(huì)遇到

Julylovin / 2615人閱讀

摘要：最近用開(kāi)發(fā)了一個(gè)博客，現(xiàn)在一直流行進(jìn)行文檔編輯，我也用這種方式進(jìn)行文檔錄入，找到了一個(gè)框架開(kāi)始以為挺簡(jiǎn)單，沒(méi)想到花了好幾個(gè)小時(shí)來(lái)增加這個(gè)功能，因?yàn)闆](méi)有比較完整的文檔所以踩了很多坑，寫這個(gè)也希望大家有前車之鑒。

最近用express開(kāi)發(fā)了一個(gè)博客，現(xiàn)在一直流行markdown進(jìn)行文檔編輯，我也用這種方式進(jìn)行文檔錄入，找到了一個(gè)框架editor開(kāi)始以為挺簡(jiǎn)單，沒(méi)想到花了好幾個(gè)小時(shí)來(lái)增加這個(gè)功能，因?yàn)闆](méi)有比較完整的文檔所以踩了很多坑，寫這個(gè)也希望大家有前車之鑒。

1、引入方式


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

2、path文件目錄
小編渲染是用的swig進(jìn)行模板渲染的，所以設(shè)置了靜態(tài)文件目錄在public下面

但是我們的editormd 的js有的script引入是動(dòng)態(tài)生成的所以目錄找不到，我還特地去看了源碼，結(jié)果在參數(shù)里面可以設(shè)置，（下次注意?。?/p> 

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

3、內(nèi)容上傳

一開(kāi)始找不到我們編輯好的內(nèi)容到哪里去取，找了半天也沒(méi)找到，后面網(wǎng)上查了一下在那一堆動(dòng)態(tài)的dom里面有一個(gè)

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


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

4、圖片上傳

editor自帶圖片上傳工具post提交，
這里要注意的是后端接收請(qǐng)求要返回的參數(shù)和獲取的值。
前端配置

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

后端接收我用了multer中間件要設(shè)置文件接收的參數(shù)editormd-image-file


后臺(tái)返回也要注意
這是一組固定格式要不然前端會(huì)報(bào)錯(cuò)url設(shè)置的是最終上傳完的鏈接，這樣才會(huì)在前端正常的顯示后端可以保存本地也可以用七牛 或者阿里云這種云存儲(chǔ)

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

5、markdown內(nèi)容展示

到這里就比較簡(jiǎn)單了

完結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93825.html

相關(guān)文章

  • Markdown編輯器editormd使用過(guò)程中的坑希望你不會(huì)遇到

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

    everfight 評(píng)論0 收藏0

  • Editor.md和markdown實(shí)現(xiàn)Sg一樣的截圖粘貼上傳

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

    weij 評(píng)論0 收藏0

  • Editor.md和markdown實(shí)現(xiàn)Sg一樣的截圖粘貼上傳

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

    jollywing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<