当前位置：
  1. 首页
  2. 技术信息

Kindeditor代码不高亮不显示行号的替代方式

指尖风暴 技术信息 0 238

首先发下替代方式：SyntaxHighlighter Evolved + Kindeditor修改插入代码按钮

先发下我修改后的截图：

mx20141223225839

这个是最终效果，接着跟上操作步骤：

  1. 安装插件SyntaxHighlighter Evolved，不用多说，直接自己搜索这个插件，这个是WordPress官方推荐的代码高亮插件
  2. 修改Kindeditor的代码按钮：

修改文件位置：wp-content/plugins/kindeditor-for-wordpress/plugins/code/code.js

把这个文件修改为下面的代码即可：

  1. /******************************************************************************* 
  2. * KindEditor - WYSIWYG HTML Editor for Internet 
  3. * Copyright (C) 2006-2011 kindsoft.net 
  4. * 
  5. * @author Roddy <luolonghao@gmail.com> 
  6. * @site http://www.kindsoft.net/ 
  7. * @licence http://www.kindsoft.net/license.php 
  8. *******************************************************************************/  
  9.   
  10. // google code prettify: http://google-code-prettify.googlecode.com/  
  11. // http://google-code-prettify.googlecode.com/  
  12.   
  13. KindEditor.plugin('code', function(K) {  
  14.     var self = this, name = 'code';  
  15.     self.clickToolbar(name, function() {  
  16.         var lang = self.lang(name + '.'),  
  17.             html = ['<div style="padding:10px 20px;">',  
  18.                 '<div class="ke-dialog-row">',  
  19.                 '<select class="ke-code-type">',  
  20.                 '<option value="jscript">JavaScript</option>',  
  21.                 '<option value="xml">HTML</option>',  
  22.                 '<option value="css">CSS</option>',  
  23.                 '<option value="php">PHP</option>',  
  24.                 '<option value="perl">Perl</option>',  
  25.                 '<option value="Python">Python</option>',  
  26.                 '<option value="ruby">Ruby</option>',  
  27.                 '<option value="java">Java</option>',  
  28.                 '<option value="vb">ASP/VB</option>',  
  29.                 '<option value="cpp">C/C++</option>',  
  30.                 '<option value="cs">C#</option>',  
  31.                 '<option value="xml">XML</option>',  
  32.                 '<option value="bash">Shell</option>',  
  33.                 '<option value="delphi">delphi</option>',  
  34.                 '<option value="">Other</option>',  
  35.                 '</select>',  
  36.                 '</div>',  
  37.                 '<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',  
  38.                 '</div>'].join(''),  
  39.             dialog = self.createDialog({  
  40.                 name : name,  
  41.                 width : 450,  
  42.                 title : self.lang(name),  
  43.                 body : html,  
  44.                 yesBtn : {  
  45.                     name : self.lang('yes'),  
  46.                     click : function(e) {  
  47.                         var type = K('.ke-code-type', dialog.div).val(),  
  48.                             code = textarea.val(),  
  49.                             cls = type === '' ? '' :  '' + type,  
  50.                             html = '[code language=" lang=<span"]n'&amp;nbsp;+&amp;nbsp;code&amp;nbsp;+&amp;nbsp;'[/code] ';  
  51.                         if  (code === '') {  
  52.                             alert(lang.pleaseInput);  
  53.                             textarea[0].focus();  
  54.                             return;  
  55.                         }  
  56.                         self.insertHtml(html).hideDialog().focus();  
  57.                     }  
  58.                 }  
  59.             }),  
  60.             textarea = K('textarea', dialog.div);  
  61.         textarea[0].focus();  
  62.     });  
  63. });  

如果不用自带的功能，那就搜索下prettify.js，吧这个功能彻底的关掉，如果以前用过Kindeditor的代码，这个最好不要动了。

上一篇 CentOS Linux 安装完成后无网卡操作
下一篇 nginx 301 跳转脚本

相关文章

发表回复

登录... 后才能评论

评论(1)

  • 艾克杨鹏 2014-12-25 13:58

    下面的代码是我精简过的，很多没用的我都删除了，需要参考高亮插件的代码