wordpress下kindeditor代码高亮bug解决办法
发布:smiling 来源: PHP粉丝网 添加日期:2014-03-23 22:13:54 浏览: 评论:0
今天看了一站长写的一篇两步教你开启KindEditor代码高亮功能,根据他的教程配置之后发现高亮代码总体来讲是非常好的,但会有些小bug了,针对此问题一聚教程小编进行了整理修复,希望对你会带来帮助.
我整理了一下用法,供大家参考,前台页面先加载插件脚本和样式,代码如下:
- <link rel="stylesheet" type="text/css" href="[kePath]/plugins/code/prettify.css" />
- <script type="text/javascript" src="[kePath]/plugins/code/prettify.js"></script>
- <script>
- $(function(){ prettyPrint(); });
- </script>
后台编辑器声明的时候加上插件样式,缺省这个参数,编辑器中插入代码跟普通文字一样,并且再次编辑的时候被隐藏了,所以这一步很关键,代码如下:
- var editor = KindEditor.create('textarea.editor', {
- cssPath : ['[kePath]/plugins/code/prettify.css']
- });
按上面的方法配置代码高亮是可以的,如果在wordpress后台开启kindeditor代码高亮,那么你发布的代码,就可以使用google代码高亮样式了,但是使用中发现个bug,就是只有在页面完全载入后才会高亮代码,在此之前是一片灰,有时个别外链的图片速度很慢,那么代码长时间处于灰色的“不可读”状态.
原因分析:由于使用了window.onload,所以只有在页面完全载入的时候才会执行,包括图片文件的下载,而我们的网站使用的大量第三方资源,例如gravatar的头像,百度分享,多说评论什么的,说不定什么时候它们抽个风(gravatar的头像速度超慢),那么prettyPrint就一直无法执行,代码也就一片灰.
修改方法:打开/wp-content/plugins/kindeditor-for-wordpress/kindeditor-class.php文件,找到如下代码:
- window.onload = function(){
- prettyPrint();
- }
- //修改为:
- $(function(){
- prettyPrint();
- })
保存退出,打开/wp-content/plugins/kindeditor-for-wordpress/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 之后就好了),保存.
Tags: wordpress kindeditor 代码
相关文章
- ·WordPress初级教程1:什么是博客?(2013-11-11)
- ·WordPress初级教程-2: 什么是WordPress?(2013-11-11)
- ·WordPress初级教程-3: WordPress的功能和特点(2013-11-11)
- ·WordPress初级教程-4: 选择WordPress博客的主机和域名(2013-11-11)
- ·WordPress初级教程-5: 安装WordPress(2013-11-11)
- ·WordPress初级教程-6: 本地安装WordPress(2013-11-11)
- ·WordPress初级教程-7: 一个数据库中安装多个WordPress博客(2013-11-11)
- ·WordPress初级教程-8: WordPress控制面板/ Dashboard(2013-11-11)
- ·WordPress初级教程-9: WordPress用户设置/ Users(2013-11-11)
- ·WordPress初级教程-10: WordPress博客配置/ Settings(2013-11-11)
- ·关于wordpress上传图片不显示的原因(2013-11-11)
- ·WordPress程序的脆弱点你知道吗 (2013-11-11)
- ·总结八大Wordpress网站百度收录实现秒收的方法绝招 (2013-11-11)
- ·WordPress如何网站投稿者也可以上传图片(2014-03-18)
- ·WordPress怎么修改新用户注册邮件内容(2014-03-18)
- ·WordPress怎么添加前台注册功能(2014-03-18)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)