在WordPress后台集成MarkDown编辑器

MarkDown是非常实用的轻量级标记语言,通过一些简单的标记就可以实现文本的快速格式化。在工作中使用MarkDown撰写文档将能够很大程度上提升效率。当然,由于这一特性,MarkDown在博客文章撰写尤其是技术博客撰写中也有很大的优势。

许多先进的博客框架已经将MarkDown语法集成在了自己的编辑器中,例如著名的Hexo、Ghost、Jekyll、Octopress等。但是老旧的WordPress却一直没有将MarkDown集成在自己的编辑器中,即使是在最新的版本中也只能兼容少量的MarkDown语法。

当然,WordPress提供了许多MarkDown的插件,这些插件我也试用过,大都有着这样或那样的问题,试用过后觉得并不能够完美的编辑MarkDown。直到看到了风景侠的文章(链接),终于找到了解决问题的思路,即在WordPress的后台集成MarkDown编辑器。原文中有不少疏漏,在本文中已经纠正并优化。

原理

在 post 页面添加一个 textarea,监听 input 事件,事件中将文本框的内容取出,用 marked.js 进行转码,将转码后的 html 放在系统中的 tinyMCE 中。 在保存时将 textarea 中的文本存入 metadata 中,下次可以继续编辑。

应用

下载marked.js文件,放入主题对应的js目录下。marked.js是一套js库,用于将markdown代码转换成html。这个marked.js来源于Jeffrey的开源项目(链接),当然你也可以在Bootstrap中文网找到对应的下载(链接)。我的是:

在同一目录下创建markdown-editor.js文件。markdown-editor.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。内容如下:

最后,在functions.php中加入以下hook,完成创建和保存MarkDown编辑内容:

效果

20160305195955

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注