在线Markdown编辑器嵌入教程

给自己的博客加一个在线Markdown编辑器，会莫名有一种在家安心创作的踏实感

李商隐作《李贺小传》中有记载：“*恒从小奚奴，骑巨驴，背一古锦囊，遇有所得，即书投囊中……*”说的是唐代大诗人李贺，出行时必背上锦囊，文思泉涌时便赶紧记下投到囊中。且不说爱诗心切，这骑驴写字倒是颇有难度。
千百年过去，如今，当你我灵感忽现，只需打开电脑拿起手机。而对博主们来说，Markdown语言+在线编辑器，更是完美的写作体验。

editormd01
前段时间百度的时候，发现一款十分好用的Markdown在线编辑器——Editor.md，并且开源，若是嵌入博客，岂不美哉？

editormd

开始使用

注意

本教程参考Editor.md官网的Simple example进行搭建，实现基础功能。更多详细信息，请访问Editor.md官网查看。

引入js/css及配置

在需要嵌入编辑器的页面加入以下代码

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
    <textarea style="display:none;">### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

推荐直接引用jsdelivr公共CDN中的js和css。

1
2
3

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/css/editormd.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/editormd.min.js"></script>

分别替换以上对应css和js即可

载入相关lib/plugin

editormd02
来到Editor.md的github页面clone最新版本的源码，将其中的lib和plugins文件夹解压，并放到网站文件目录/editormd下。

配置属性

如：
height : “100%”, //编辑器高度
path : “./lib/“, //根据你的文件目录修改
等等
更多配置属性，请移步github的readme。

到这里，一个简单的MD在线编辑器就基本上嵌入成功啦！

小问题

1. 点击功能按钮无效

比如点击插入图片按钮无法弹出对话框，控制台报错。这是由于插件没有启用的缘故。检查一下你的plugins目录有没有成功上传。

2. emoji表情无法显示

将emoji表情下载并上传到服务器，修改emoji-dialog.js文件的指向就好了。（我觉得不太常用就没启用）

3. 移动端输入时，光标上漂移

看到github上好多人提issue，至今也没有更新代码解决。（作者弃坑）
其实是老版本CodeMirror的BUG，下载最新版的codemirror替换掉lib文件夹里原来的旧版本codemirror就行了。

4. 编辑栏行号重叠

因为使用原版CodeMirror所以相关css没有针对editormd进行适配，会导致编辑区域行号重叠。
找到/editormd/lib/codemirror/codemirror.min.css里面的.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px; 将min-width改成23px以上解决。

没了

现在，真的可以正常使用了（虽然还是可能有bug）。
很奇怪这么好的开源软件，竟然有好几年没有正式维护了。也不知道作者跑去了哪里。原来百度搜索markdown，这款编辑器排名显示还非常靠前，现在，那个地址也重定向到别的网站去了。

虽然写作是越来越方便，但是……
坐着敲半天字，还真是挺累的啊。

参考资料

[1]ThinkCMF整合Editor.md编辑器挖坑补坑指南 2019-02-26 https://www.cyqsd.cn/8039.html
[2]editormd使用教程 2017-01-21 https://www.cnblogs.com/liujiaxian/p/6336841.html