jQuery editor KindEditor4.1.4 code highlighting setting tutorial_jquery

KindEditor official website: http://www.kindsoft.net/

1. The JS and CSS files that need to be loaded are:

Copy code The code is as follows:

2. After the editor is initialized and set, Add prettyPrint() inside:

Copy code The code is 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 and wants to be displayed, you need to call prettyPrint( ; 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("Details...");
}
}


3. The default code does not wrap lines. To automatically wrap lines, you can modify prettify.css and change the original value of white-space pre to pre-wrap:



Copy code


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

}