首頁 >Java >java教程 >Markdown編輯器editormd使用過程中的坑希望你不會遇到

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

不言原創: 2018-05-05 15:10:523448瀏覽

這次的這篇文章給大家分享的是Markdown編輯器editormd使用詳細過程，可以讓大家在使用過程中避免很多問題，有需要的小伙伴可以參考一下

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

1、引入方式

Markdown編輯器editormd使用過程中的坑希望你不會遇到
languages看你需求，如果沒有可以不要引入，小編之前只是引用了js和css沒想到還有這麼多模組檔案要引入。

2、path檔案目錄
小編渲染是用的swig進行範本渲染的，所以設定了靜態檔案目錄在public下面
Markdown編輯器editormd使用過程中的坑希望你不會遇到
但是我們的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()

Markdown編輯器editormd使用過程中的坑希望你不會遇到
直接查找到這個元素然後透過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

Markdown編輯器editormd使用過程中的坑希望你不會遇到
後台返回也要注意
這是一組固定格式要不然前端會報錯url設定的是最終上傳完的鏈接，這樣才會在前端正常的顯示後端可以保存本地也可以用七牛或阿里雲這種雲端儲存

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

5、markdown內容展示

到這裡就比較簡單了

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<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>

結束

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

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

1、引入方式

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

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

Markdown編輯器editormd使用過程中的坑希望你不會遇到
后台返回也要注意
这是一组固定格式要不然前端会报错url设置的是最终上传完的链接，这样才会在前端正常的显示后端可以保存本地也可以用七牛或者阿里云这种云存储

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

5、markdown内容展示

到这里就比较简单了

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<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>

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

相關文章