jQuery編輯器KindEditor4.1.4代碼高亮顯示設(shè)置教程

更新時(shí)間：2013年03月01日 10:23:50 作者：

接下來(lái)介紹下編輯器KindEditor4.1.4代碼高亮顯示設(shè)置：加載需要的JS和CSS文件/編輯器初始化設(shè)置后，在里面加prettyPrint等等，感興趣的你可以參考下本文

編輯器KindEditor官網(wǎng)： 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、編輯器初始化設(shè)置后，在里面加prettyPrint()：

復(fù)制代碼代碼如下:

 
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(); 
}); 

假如要高亮的代碼一開(kāi)始是隱藏的，要顯示出來(lái)，則需要調(diào)用prettyPrint();

復(fù)制代碼代碼如下:

 
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("詳細(xì)..."); 
} 
} 

3、默認(rèn)代碼是不換行的，要自動(dòng)換行可以修改prettify.css，把white-space原來(lái)的值pre修改為pre-wrap：

復(fù)制代碼代碼如下:

 
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; /* 原來(lái)的值是 pre;*/ 
} 

您可能感興趣的文章:

相關(guān)文章

jquery ui bootstrap 實(shí)現(xiàn)自定義風(fēng)格
本文主要是給大家分享了jQuery UI bootstrap的自定義風(fēng)格，以及自定義的方法，非常的實(shí)用，有需要的小伙伴千萬(wàn)不要錯(cuò)過(guò)
2014-11-11
jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
jQuery EasyUI是一個(gè)旨在輔助HTML5打造更好的Web界面的框架,而其中的Datagrid組件也是非常強(qiáng)大,這里我們就來(lái)看一下jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
2016-06-06
jquery.post用法示例代碼
使用ajax在前端驗(yàn)證是否執(zhí)行某個(gè)操作，下面為大家介紹下jquery.post的具體使用
2014-01-01
js jquery做的圖片連續(xù)滾動(dòng)代碼
有bug..點(diǎn)到后面的圖片后,再返回 ..... 問(wèn)題出現(xiàn)了...
2008-01-01
jquery 日期分離成年月日的代碼
jquery 將日期分離成年月日的代碼，需要的朋友可以參考下。
2010-05-05
Js與Jq 獲取頁(yè)面元素值的方法和差異對(duì)比
這篇文章主要介紹了原生js獲取瀏覽器和對(duì)象寬高與jquery獲取瀏覽器和對(duì)象寬高的方法關(guān)系對(duì)比,十分實(shí)用，需要的朋友可以參考下
2015-04-04
jQuery.Autocomplete實(shí)現(xiàn)自動(dòng)完成功能（詳解）
本篇文章除了介紹jquery.autocomplete基本參數(shù)外，主要說(shuō)明jquery.autocomplete的數(shù)據(jù)源的格式問(wèn)題。
2010-07-07
jQuery時(shí)間軸插件使用詳解
本文給大家分享的是使用jQuery制作的模仿百度時(shí)間軸特效的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。
2015-07-07
jQuery實(shí)現(xiàn)全部購(gòu)物車(chē)功能實(shí)例
本文詳細(xì)講解了jQuery實(shí)現(xiàn)全部購(gòu)物車(chē)功能，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-11-11
jQuery文件上傳控件 Uploadify 詳解
本文主要介紹jQuery文件上傳控件 Uploadify的用法，原作者做了非常詳細(xì)的備注，有需要的朋友可以參考一下。
2016-06-06