轻松记录您
灵感和创意

Markdown编辑器及使用过程中的坑

无论发布含有代码的文章、画流程图、展示数学公式等都有完备的支持。而且此编辑器与后端代码无关,纯前端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内容。

未经允许不得转载:坚果云Markdown » Markdown编辑器及使用过程中的坑
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍