博客建设 ·

WordPress默认编辑器TinyMCE添加代码高亮弹出对话框

1) 在主题的 js 目录下新建一个 mce_code_plugin.js 文件,把下面代码贴进去:

2) 再创建一个 mce_code_plugin.htm 的文件(名字要与上面JS中的相同),这个HTML文件里的内容大家可以自己定义,里面内容就是点击按钮后弹出的对话框的内容,我的里面添加了一个代码语言和一个 Textarea 用于粘贴代码,贴进去如下代码:

3) 把按钮也放到 js 文件夹下(放到其他位置的时候需要修改JS中相关路径)4) 打开 functions.php,引入JS并注册按钮。在 funcitons.php 最后面添加下面代码:

最后涉及到的文件如下(此处不是代码,只是目录结构):

好了,只需要上面几步,现在到后台编辑一篇文章看看,编辑器上是不是已经多出来我们刚刚创建的按钮了?

点击按钮,弹出下面的对话框:

粘贴进去代码之后:

Complete !

PS:不要说你那个弹出框怎么那么丑啊什么的,自己编辑样式去 ;还有图片自己找。

参与评论