在网站中嵌入editor.md markdown编辑器以及CSS样式修改

欢迎访问我的个人博客查看显示效果：

点击跳转到hehung的博客查看显示效果

 

最近在网上查找markdown编辑器的时候，找到了一款比较好的编辑器 editor.md, 开源免费的。
点我跳转到官网
官网也有使用教程，我这里主要是针对hexo上的使用，因为我们正在hexo上使用的是静态页面，所以只能用于对文章的编辑。如果是动态网站，还可以实现，文章的自动发布等功能。

特性

• 支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；
• 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
• 支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；
• 支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
• 支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
• 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
• 兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；
• 支持自定义主题样式；

下载

在前面已经说过了，可以直接去官网上下载，下载之后，解压缩，有如下文件：

 

解压缩后的文件

移植

移动文件

然后把这个目录的文件全部复制到主题目录下的source文件夹下的libs文件夹下，其实放在哪儿都无所谓，只不过这个主题的外接库都放在libs文件夹下，移植的时候也方便，如下所示，我重新给文件夹命了个名字叫做editorMd。

 

解压缩后的文件

创建一个新的页面

使用如下面命令创建一个新的页面，名字叫做MyMarkdown（这个名字可以随便取）

hexo

hexo new page MyMarkdown

然后在hexo的source文件夹下会有一个index.md文件，修改里面的内容如下：

markdown

---
title: editor.md
date: 2019-11-16 11:20:03
type: "MyMarkdown"
layout: "MyMarkdown"
---

PS:
title里面的内容是你打开这个页面的时候会在控制栏上显示的内容，修改成你想要显示的内容
layout里面的内容就是你创建的这个页面的html代码的保存文件MyMarkdown.ejs，在主题的layout文件夹下，可以修改文件名。

导入editor.md文件，编辑代码

做完上面的工作之后就可以开始对页面的显示代码进行编辑了

创建ejs文件

在主题的layout文件夹下创建一个文件，名字和上面填写index.md文件的时候的layout后面的内容一样，如下所示。

 

创建ejs文件

导入editor的css和js

打开主题目录下的_config.yml文件，将editor的js文件和CSS写入，如下所以，其实也可以直接在要编辑的ejs文件里面写绝对路径的，但是为了规范化和可以执行，还是将路径卸载该文件下方便管理。

 

导入js和css

现在打开layout文件夹下的MyMarkdown.ejs文件开始对代码的编辑了

写入如下代码：

html

查看效果

使用如下命令，重新编译，在本地运行试验一下。

hexo

hexo cl && hexo g && hexo s

会发现显示效果如下所示，比较乱，其中的罪魁祸首就是materialize.min.css文件下的选择器样式对editor.md的选择器样式进行的修改，我也不知道如何进行避免，不光如此，打开图片，链接等按钮的时候显示效果也很不好。

 

导入js和css

从上面的显示效果可以看出，很乱，而且主题导航栏还把我们的编辑器给遮挡了，所以需要修改CSS样式让他好看与正常

样式修改

修改CSS样式

调试查看显示不正常的原因的时候，发现是materialize.min.css下的样式对编辑器样式的干扰，所以在这里对有影响的样式进行重编辑。
完整的主题样式如下。

html

最终效果

经过试验，最后可以正常编辑，功能基本完整，在上面的代码中，我已经开启了html样式的显示，表情样式的显示等，还有一些功能灯具实际情况进行玄奇开启与关闭。

显示效果

 

点我跳转到hehung博客查看效果

 

后记

该编辑器的软件比较大，有8M多，其中很多东西其实都是没有必要的，可以删除，具体删除那些文件，你们自己看着办吧，哈哈。

我目前没有发现重大bug，只有一个就是编辑器的左边框的下面有一个灰色的边线，不知道咋回事，有人知道可以给我留言，如果发现其他的什么显示BUG也可以给我留言。