Home > Web Front-end > JS Tutorial > jQuery editor KindEditor4.1.4 code highlighting setting tutorial_jquery

jQuery editor KindEditor4.1.4 code highlighting setting tutorial_jquery

WBOY
Release: 2016-05-16 17:41:12
Original
1113 people have browsed it

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;*/
}

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template