Markdown编辑器editormd使用过程中的坑希望你不会遇到

everfight 发布于2019-08-30 14:18 / 2860人阅读

摘要：最近用开发了一个博客，现在一直流行进行文档编辑，我也用这种方式进行文档录入，找到了一个框架开始以为挺简单，没想到花了好几个小时来增加这个功能，因为没有比较完整的文档所以踩了很多坑，写这个也希望大家有前车之鉴。

最近用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 攻击你是如何解决的使用遇到问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115929.html

Markdown编辑器editormd使用过程中的坑希望你不会遇到

摘要：最近用开发了一个博客，现在一直流行进行文档编辑，我也用这种方式进行文档录入，找到了一个框架开始以为挺简单，没想到花了好几个小时来增加这个功能，因为没有比较完整的文档所以踩了很多坑，写这个也希望大家有前车之鉴。 showImg(https://segmentfault.com/img/bV7etM?w=2878&h=1546); 最近用express开发了一个博客，现在一直流行markd...

Julylovin 2019-08-22 15:52 评论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