jQuery编辑器KindEditor4.1.4代码高亮显示设置教程

159 阅读 0 评论 105 点赞

我是靠谱客的博主畅快草莓，最近开发中收集的这篇文章主要介绍jQuery编辑器KindEditor4.1.4代码高亮显示设置教程，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

编辑器KindEditor官网： http://www.kindsoft.net/

1、需要加载的JS和CSS文件为：

复制代码代码如下:

 
<script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script> 
<script src="kindeditor-4.1.4/plugins/code/prettify.js" type="text/javascript"></script> 
<link href="kindeditor-4.1.4/plugins/code/prettify.css" rel="stylesheet" type="text/css" /> 

2、编辑器初始化设置后，在里面加prettyPrint()：

复制代码代码如下:

 
KindEditor.ready(function (K) { 
window.EditorObject = K.create('#txtBody', { 
cssPath: 'plugins/code/prettify.css', 
resizeType: 1, 
allowPreviewEmoticons: false, 
allowImageUpload: false, 
items: [ 
'code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 
'insertunorderedlist', '|', 'emoticons', 'image', 'link'] 
}); 
prettyPrint(); 
}); 

假如要高亮的代码一开始是隐藏的，要显示出来，则需要调用prettyPrint();

复制代码代码如下:

 
function Show(i) { 
var id = '#divBody' + i; 
if($(id).is(":hidden")){ 
$('#divIntro' + i).hide(); 
$(id).slideDown(); 
$(id).next("a").text("收缩..."); 
prettyPrint(); 
} 
else{ 
$('#divIntro' + i).show(); 
$(id).slideUp(); 
$(id).next("a").text("详细..."); 
} 
} 

3、默认代码是不换行的，要自动换行可以修改prettify.css，把white-space原来的值pre修改为pre-wrap：

复制代码代码如下:

 
pre.prettyprint { 
border: 0; 
border-left: 3px solid rgb(204, 204, 204); 
margin-left: 2em; 
padding: 0.5em; 
font-size: 110%; 
display: block; 
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 
margin: 1em 0px; 
white-space: pre-wrap; /* 原来的值是 pre;*/ 
} 