WordPress简单集成MarkDown编辑功能

WordPress4.3以上的高版本虽然集成了部分markdown的功能,结合Wordpress自带编辑器也基本不错了,但是没有单独的Markdown输入框还是有点不爽,上网捣鼓了一下,找到了一个比较简单的集成方法,这里分享一下,当然功能还是有点欠缺(比起插件还是弱了一点),但是轻量级文章编写也完全够用了。

WordPress简单集成MarkDown编辑功能

 

集成原理

 

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

集成后效果

  • 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
  • 代码高亮 需要配合代码高亮插件,我已经对marked.js做了修改,编译后的hmtl代码标签完美兼容Crayon Syntax Highlighter高亮插件,爱折腾的也可以自己改成其他插件的完美支持
  • 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。

注:代码分离和保存,只适用于单纯使用了Markdown编辑框编辑的情况,由于这儿没有HTML到Markdown语法的转换,所以在在原编辑框编辑的部分,不会同步,且集成原理注定了在原编辑框编辑后再次在Markdown编辑框编辑会以Markdown的内容为准,所以需要原编辑框内操作的放在最后进行,但这种情况下Markdown内保存文本也没了意义,所以这个集成还是有所缺陷

Markdown语法转换和编辑脚本

脚本

注:点开以上链接,右键另存为即可得到对应js文件

下载以上两个js脚本,在主题所在的目录下新建一个名为markdown的文件夹,上传即可

Markdown编辑框后台集成

  • 后台markdown编辑框的集成
  • 调用对应js脚本转化markdown语法

在主题的functions.php中加入以下代码完成集成

这里介绍下我修改js脚本后插入代码的定制Markdown语法吧

  • ```默认的Markdown代码插入规则
  • ```php 指定插入的代码所属语言,这里我写的是php,其他的类似
  • ```min 插入的代码折叠
  • ```min|php 插入代码折叠并指明所属语言

最后的集成效果附图一张(来源于这种集成方法的第一作者Click Here!
WordPress简单集成MarkDown编辑功能
到目前为止Markdown就集成到了主题中,博主这篇文章就用的纯粹的Markdown语法编辑的,效果还不错吧 WordPress简单集成MarkDown编辑功能

繁夜

发表评论


头像速览

:[傲慢]::[白眼]::[鄙视]::[擦汗]::[呲牙]::[大兵]::[得意]::[发呆]::[发怒]::[奋斗]::[鼓掌]::[哈欠]::[憨笑]::[坏笑]::[惊讶]::[可爱]::[可怜]::[酷]::[困]::[冷汗]::[流汗]::[流泪]::[难过]::[撇嘴]::[敲打]::[色]::[衰]::[偷笑]::[微笑]::[吓]::[疑问]::[阴险]::[晕]::[咒骂]::[菜刀]::[玫瑰]::[凋谢]::[礼物]::[拥抱]::[炸弹]::[强]::[弱]::[握手]: