提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery编辑器教程代码 设置 显示 高亮
2023-06-13 09:14:46 时间
编辑器KindEditor官网：http://www.kindsoft.net/

1、需要加载的JS和CSS文件为：
复制代码代码如下:

<scriptsrc="kindeditor-4.1.4/kindeditor.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="kindeditor-4.1.4/plugins/code/prettify.js"type="text/javascript"></script>
<linkhref="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();
复制代码代码如下:
functionShow(i){
varid="#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:3pxsolidrgb(204,204,204);
margin-left:2em;
padding:0.5em;
font-size:110%;
display:block;
font-family:"Consolas","Monaco","BitstreamVeraSansMono","CourierNew",Courier,monospace;
margin:1em0px;
white-space:pre-wrap;/*原来的值是pre;*/
}

相关文章