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>

完结