jquery Editor KindEditor4.1.4 code highlighting settings tutorial _jquery

Editor Kindeditor official website: http://www.kindsoft.net/

1, the need to load the JS and CSS files are:

Copy Code code as follows:

<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, editor initialization settings, add Prettyprint in the inside ():

Copy Code code as follows:

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

If the code to be highlighted is initially hidden, to be displayed, you need to invoke Prettyprint ();

Copy Code code as follows:

function Show (i) {
var id = ' #divBody ' + i;
if ($ (ID). Is (": hidden")) {
$ (' #divIntro ' + i). Hide ();
$ (ID). Slidedown ();
$ (ID). Next ("a"). Text ("Shrink ...");
Prettyprint ();
}
else{
$ (' #divIntro ' + i). Show ();
$ (ID). Slideup ();
$ (ID). Next ("a"). Text ("detailed ...");
}
}

3, the default code is not to change lines, to automatically change the line can modify PRETTIFY.CSS, White-space original value of the pre modified to Pre-wrap:

Copy Code code as follows:

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; /* The original value is pre;*/
}