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编辑功能

繁夜

发表评论


:[微笑]::[撇嘴]::[色]::[发呆]::[得意]::[流泪]::[害羞]::[闭嘴]::[睡]::[大哭]::[尴尬]::[发怒]::[调皮]::[呲牙]::[惊讶]::[难过]::[酷]::[冷汗]::[抓狂]::[吐]::[偷笑]::[可爱]::[白眼]::[傲慢]::[饥饿]::[困]::[惊恐]::[流汗]::[憨笑]::[大兵]::[奋斗]::[咒骂]::[疑问]::[嘘...]::[晕]::[折磨]::[衰]::[骷髅]::[敲打]::[再见]::[擦汗]::[抠鼻]::[鼓掌]::[糗大了]::[坏笑]::[左哼哼]::[右哼哼]::[哈欠]::[鄙视]::[委屈]::[快哭了]::[阴险]::[亲亲]::[吓]::[可怜]::[笑哭]::[doge]::[泪奔]::[无奈]::[托腮]::[斜眼笑]::[喷血]::[惊喜]::[骚扰]::[小纠结]::[我最美]::[羊驼]::[幽灵]::[吃]::[OK]::[爱你]::[抱拳]::[勾引]::[强]::[弱]::[拳头]::[爱心]::[喝彩]::[西瓜]::[啤酒]::[玫瑰]::[凋谢]::[礼物]::[拥抱]::[月亮]::[菊花]::[棒棒糖]::[蛋]::[刀]::[菜刀]::[炸弹]::[手枪]:

刷新评论