项目中使用Editor.md 中的坑

背景

最近项目中可能要支持markdown 编辑器，所以提前调研了一下；现在基本做技术的没有不知道Markdown 的，因为实在是太强大了，只需要了解很简单的几个操作，即可编辑非常优美的文章，包括TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 ，不在让你浪费时间在格式的调整。

资源：Editor.md   https://pandao.github.io/editor.md/

这个插件就不多说了，以为官网已经说的很多了，虽然在使用上有点小瑕疵，但是大体上还是很不错的，即插即用。

editor.md目录介绍

这边需要说明一下 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主要是编辑器上面的操作功能插件，比如图片上传等，可选择使用的进行加载；

导入到web 项目中的目录如下：

红线框内 fonts,images,lib,plugins 目录是从解压的文件中原封不动拷贝过来的，尽量不改动（文件夹名字），因为后面如果要引入会出现奇葩的问题。

红线框内js,css 文件，我只拷贝了editormd.js，editormd.css 

引入css和js

在使用到editor.md的页面引入css和js：

<link href="#springUrl('/static/js/plugins/editormd/css/editormd.css')" rel="stylesheet">
<script src="#springUrl('/static/js/jquery.min.js')"></script>
<script src="#springUrl('/static/js/plugins/editormd/js/editormd.js')"></script>

页面中添加div

在需要添加editor.md编辑器的地方输入以下div：

<div id="test-editormd">