优化Kindeditor的代码高亮
由于 WordPress 原本的富文本编辑器功能比较简单,所以使用了 Kindeditor 插件(安装方法看这里)。但是最近发现一个问题,就是在页面没有完全载入的情况下,代码高亮不起来,就是下图的样子:
正常应该是这样的:
原因其实很简单,右键查看源代码,找到“高亮代码”的js是这样写的:
window.onload = function(){ prettyPrint(); }
window.onload 只有在页面完全载入的时候才会执行,包括图片文件的下载,而我们的网站使用的大量第三方资源,例如gravatar的头像,百度分享,多说评论什么的,说不定什么时候它们抽个风(gravatar的头像速度超慢),那么prettyPrint就一直无法执行,代码也就一片灰。所以我们肯定不能再 window.onload 的时候才执行代码高亮,首先想到的就是 jquery 的 document.ready,那么我们开始着手修改kindeditor wordpress插件。
我们找到 /wp-content/plugins/kindeditor-for-wordpress 下的 kindeditor.php 和 kindeditor-class.php 两个文件。
首先打开 kindeditor-class.php,很容易找到上面的代码,把它修改成:
$(function(){ prettyPrint(); })
修改完如下图:
然后打开 kindeditor.php 文件,找到如下代码:
add_action('wp_enqueue_scripts', array(&$kindeditor, 'add_head_script'));
修改为:
add_action('wp_footer', array(&$kindeditor, 'add_head_script'));
把 Kindeditor 的高亮代码 js 注册在底部(注意:不一定要在wp_footer,你可以根据实际情况自己修改,总之在引入 jQuery 之后就好了),保存。
现在,代码会在第一时间高亮起来,不需等待图片的载入,方便用户阅读。
标签:小技巧