这次的这篇文章给大家分享的是Markdown编辑器editormd使用详细过程,可以让大家在使用过程中避免很多问题,有需要的小伙伴可以参考一下
最近用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内容展示
到这里就比较简单了
<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>
完结
最近用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内容展示
到这里就比较简单了
<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>
相关推荐:
Atas ialah kandungan terperinci Markdown编辑器editormd使用过程中的坑希望你不会遇到. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!