Markdown编辑器——Editor.md的使用

最近在写一个个人博客项目，其中用到了一款开源的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

<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css">

引入js

<script src="../../static/lib/editormd/editormd.min.js"></script>

在页面创建一个区域用来显示Markdown编辑器

 <!--z-index: number ：设置元素的堆叠顺序，number大的排在前面--><div id="md-content" style="z-index: 1 !important"><textarea name="content" placeholder="博客内容" style="display: none">                   </textarea></div>

用js初始化这块区域

<script type="text/javascript">// 初始化markdown编辑器var contentEditor$(function() {//md-content必须和页面区域的最外层div的id相同contentEditor = editormd("md-content", {// 在页面显示的宽度width   : "100%",// 高度height  : 640,// 单滚动条syncScrolling : "single",// lib资源的路径path    : "../../static/lib/editormd/lib/"});});</script>

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没有被找到，检查一下两者是不是一致。

Markdown编辑器——Editor.md的使用相关推荐

Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页面中 ...
基于JavaWeb的MarkDown编辑器editor.md的使用
1.简介 editor.md是国内开发的开源项目,单纯基于前端JavaScript,可以实现markdown编辑器的所有功能. 主要特性支持通用 Markdown / CommonMark 和 GF ...
Markdown编辑器Editor.md插件的使用
官网: Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)https://pandao.github.io/editor.md/index.html配置项 ...
127.0.0.1/dokuwiki/install.php,DokuWiki安装+集成markdown编辑器editor.md
安装安装php和nginx yum install -y php70w php70w-gd php70w-xml php70w-fpm nginx 开机自启动 systemctl enable ng ...
markdown在线编辑器 editor.md 二次开发详细教程
markdown在线编辑器 editor.md 二次开发需求经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者 ...
使用editor编辑器遇到的小问题：editor.md工具栏置顶
问题原因: 在使用Markdown编辑器editor.md时,由于editor.md的toolbar始终保持在页面顶部,导致我在使用vue整合时,页面排版出现错乱解决方案: 在 editormd.j ...
PHP项目中使用 Markdown编辑器
个人站点 :http://oldchen.iwulai.com/ Markdown在技术圈越来越受欢迎,今天为大家带来一款国内开源的比较好用的Markdown编辑器--editor.md. 在这次项目 ...
SpringBoot整合Editor.md实现Markdown编辑器
Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建. 文章目录一.技术选型及分支部署二.集成手册 2 ...
editor.md中markdown编辑器的实现
markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器 1.下载editor.md插件 git地址:https://github.com/pandao/edit ...
Editor.md 的Markdown 编辑器集成与使用（全）
在这之前使用的编辑器是ueditor,是百度的:现在记录一下已经集成有段时间的 Editor.md 的 md 编辑器,确实好用! 在这之前,有个问题,数据库是保存 md 的还是保存 html 的,在网 ...

Markdown编辑器——Editor.md的使用

最近在写一个个人博客项目，其中用到了一款开源的Markdown文本编辑器——Editor.md，记录一下将其集成到项目中的方法，以及踩的坑。

Markdown编辑器——Editor.md的使用相关推荐

最新文章

热门文章