2年前 (2017-01-26)  WP代码 代码·功能 |   1 条评论  2,258 次围观 
文章评分 0 次,平均分 0.0

转自:风景侠

WordPress 的编辑器没有 markdown 功能,曾今寻便所有的 plugin ,发现都不太理想,并且作为一个非插件控的我,即使找到了大而全的插件,也会想方设法来去插件化。于是今天早上拍了下脑门,决定自己集成 markdown

集成后的功能如下:

  • 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
  • 代码高亮 程序员最爱,需要在前台做代码高亮
  • 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。

先看下效果

wordpress集成markdown

原理

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

开始集成

  1. 下载 marked.js 和 makemarkdown.js
  2. 将 marked.jsmakemarked.js 拷贝到 ~\wp-content\{你的主题目录}\js\ 目录下

    marked.js 是一套 js 库,用于将 markdown 代码转换成 html。makemarked.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。

  3. 在 function.php中加入以下代码

 

 

除特别注明外,本站所有文章均为JUST FOR FUN原创,转载请注明出处来自http://im.acirno.com/2527.html

关于
在哪都是个打酱油的(+﹏+)

发表评论

表情 格式
  1. 奇怪了,我这边没用!

    ♡張無忌/♡ 评论达人 LV.1 2年前 (2017-03-03) [0] [0]
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

扫一扫二维码分享