Markdown编辑器 |
您所在的位置:网站首页 › editormd主题插件 › Markdown编辑器 |
最近在写一个个人博客项目,其中用到了一款开源的Markdown文本编辑器——Editor.md,记录一下将其集成到项目中的方法,以及踩的坑。
1. 从官网上下载源码 官网地址:Editor.md - 开源在线 Markdown 编辑器 最新版本: v1.5.0,更新于 2015-06-09 (已经很久没有更新版本了,但在项目中用的还是非常多的) 下载下来之后是一个压缩包,解压 2. 将需要的资源导入项目 创建一个Springboot项目,在resources/statics目录下创建一个lib子目录,用来放项目中需要的页面插件,再创建editormd目录用来放Editor.md的资源。 代码结构如下: 将刚才解压的editor.md-master中的一部分资源拷贝到项目的editormd目录里。 3. 编写页面展示代码 可以参考官方给的例子,在解压后的editor.md-master/examples目录下可以找到很多例子,其实必须要做的只有以下四步。 引入css 引入js 在页面创建一个区域用来显示Markdown编辑器 用js初始化这块区域 // 初始化markdown编辑器 var contentEditor $(function() { //md-content必须和页面区域的最外层div的id相同 contentEditor = editormd("md-content", { // 在页面显示的宽度 width : "100%", // 高度 height : 640, // 单滚动条 syncScrolling : "single", // lib资源的路径 path : "../../static/lib/editormd/lib/" }); });4. 最终页面显示效果 5. 踩到的坑 Firstblood Refused to apply style from 'http://localhost:63342/mysite/templates/static/lib/editormd/lib/codemirror/addon/dialog/dialog.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 原因是初始化markdown编辑器中,lib的路径没有写对。 Doublekill Uncaught TypeError: Cannot read properties of undefined (reading 'value') at Function.CodeMirror.fromTextArea (codemirror.min.js:40) at init.setCodeMirror (editormd.min.js:2) at editormd.min.js:2 at HTMLScriptElement.t.isIE8.r.onload (editormd.min.js:3) 画面显示区域什么也没显示。 原因是粗心大意,不是class,而应该是id,本质上是初始化markdown编辑器那段js代码里面指定的页面区域的id没有被找到,检查一下两者是不是一致。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |