jQuery 편집기 KindEditor4.1.4 코드 강조 설정 tutorial_jquery

KindEditor 공식 홈페이지: http://www.kindsoft.net/

1. 로드해야 하는 JS 및 CSS 파일은 다음과 같습니다.

복사 코드 코드는 다음과 같습니다.

🎜>

2. 편집기가 초기화되고 설정되었습니다. 내부에 PrettyPrint() 추가:

코드 복사 코드는 다음과 같습니다.

KindEditor.ready(함수 ( K) {
window.EditorObject = K.create('#txtBody', {
cssPath: 'plugins/code/prettify.css',
resizeType: 1 ,
allowPreviewEmoticons: false,
allowImageUpload: false,
항목: [
'code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold ', 'italic', 'underline' ,
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', '이모티콘 ', 'image', 'link' ]
});
prettyPrint();
})

강조표시할 코드가 처음에 숨겨져 있는 경우 표시하려면 PrettyPrint( ; id = '#divBody' i;
if($(id).is(":hidden")){
$('#divIntro' i).hide를 호출해야 합니다. ();

$(id) .slideDown(); $(id).next("a").text("Shrink..."); } else{ $ ('#divIntro' i).show(); $(id).slideUp() $(id).next("a").text ("Details..."); }

}

3. 기본 코드는 줄을 자동으로 줄바꿈하지 않습니다. prettify.css를 수정하면 됩니다. 사전 포장할 공백 사전의 원래 값:



코드 복사


코드는 다음과 같습니다.


pre.prettyprint {
테두리: 0;
테두리 왼쪽: 3px 단색 rgb(204, 204, 204)
여백 왼쪽:

패딩: 0.5em; -size: 110%;
display: block;

font -family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace 여백: 1em 0px; white-space: pre-wrap; /* 원본 값은 pre;*/ }