无论发布含有代码的文章、画流程图、展示数学公式等都有完备的支持。而且此编辑器与后端代码无关,纯前端js实现。
editor.md目录介绍
本文介绍的版本为v1.5.0,在首页下载完成,解压editor.md-master.zip文件,可以看到如下图的目录结构:
图中红色框内是我们要引用到项目的文件和目录。
– css目录中可选择editormd.min.css放在对应的项目css目录中;
– js可选择editormd.min.js放置在对应项目的js目录中,需要注意的是同时需要引入jQuery,这里使用jquery.min.js;
– examples文件夹中是一部分核心功能的demo,在使用的过程中用到对应的组件或功能可打开参考;
– fonts是需要用到字体,可一并引入项目;
– images是一些加载类的图片;
– lib是editor.md依赖的第三方js资源,比如流程图的js资源;
– plugins主要是编辑器上面的操作功能插件,比如图片上传等,可选择使用的进行加载;
editor.md整合使用
在上面提到对应的文件根据项目的需要拷贝至项目中,需要注意的是最好文件夹的名字在项目中一一对照。特别是plugins这个文件夹的名称,在使用插件时editormd.min.js会默认找对应plugins路径下的插件。
div的id为content-editormd,后面的js代码中需要用到。textarea就是我们编写Markdown文件的地方,editor.md会将此textarea渲染成在第一种图中看到的效果。默认的textarea的内容为Markdown文档的内容,通过form表单提交时后台可通过content-editormd-Markdown-doc获取到对应的Markdown文档内容。比如Java中可通过request.getParameter(“content-editormd-Markdown-doc”)获得。
注意:此处需要注意的是,无论需要html格式的内容还是Markdown格式的内容,都只需要写一个textarea。此处有一个很大的坑。不少其他教程中说需要两个textarea,那么会导致后一个textarea后台获得的数据是一个数组,而不是单纯的HTML内容。