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

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



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

开始使用

注意

本教程参考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。

<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


来到Editor.md的github页面clone最新版本的源码,将其中的libplugins文件夹解压,并放到网站文件目录/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


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

全新域名,全新起点 上一篇
常用语言注释小收集 下一篇