wordpress下kindeditor代码高亮bug解决办法 - WordPress

wordpress下kindeditor代码高亮bug解决办法

今天看了一站长写的一篇两步教你开启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 之后就好了),保存.

查看更多关于wordpress下kindeditor代码高亮bug解决办法 - WordPress的详细内容...