CKEditor 코드 삽입 플러그 인 첨부

관례 에 따라 먼저 쓸데없는 말 을 하 자.CKEditor 는 차세 대 FCKeditor 로 재 개 발 된 버 전이 다.CKEditor 는 전 세계 에서 가장 우수한 웹 페이지 온라인 문자 편집기 중 하나 로 놀 라 운 성능 과 확장 성 으로 각 사이트 에 널리 활용 된다.홈 페이지 에서 ckeditor 를 다운로드 합 니 다.저 는 ckeditor 를 다운로드 합 니 다.3.0.2。CKEditor 는 원래 의 FCKeditor 와 너무 다 릅 니 다.개발 자로 서 자신의 블 로 그 를 할 때 항상 코드 를 붙 여야 하기 때문에 코드 를 삽입 하 는 플러그 인 을 만 들 수 밖 에 없습니다.하 이 라이트 코드 는'SyntaxHighlighter'를 사용 합 니 다.1."ckeditor\plugins\"디 렉 터 리 에"insertcode"디 렉 터 리 를 새로 만 든 다음"insertcode"디 렉 터 리 에"plugin.js"를 새로 만 들 고 다음 코드 를 입력 하 십시오.

 
CKEDITOR.plugins.add('insertcode', { 
requires: ['dialog'], 
init: function(a){ 
var b = a.addCommand('insertcode', new CKEDITOR.dialogCommand('insertcode')); 
a.ui.addButton('insertcode', { 
label: a.lang.insertcode.toolbar, 
command: 'insertcode', 
icon: this.path + 'images/code.jpg' 
}); 
CKEDITOR.dialog.add('insertcode', this.path + 'dialogs/insertcode.js'); 
} 
}); 

2."images"디 렉 터 리 를 추가 하고"code.jpg"그림 을 넣 으 면 됩 니 다.물론 그림 은 구 글 에서 16*16 크기 의 그림 을 찾 을 수 있 습 니 다.3."dialogs"디 렉 터 리 를 추가 하고"insertcode.js"를 새로 만 듭 니 다.다음 코드 를 입력 하 십시오.insertcode.js

 
CKEDITOR.dialog.add('insertcode', function(editor){ 
var escape = function(value){ 
return value; 
}; 
return { 
title: 'Insert Code Dialog', 
resizable: CKEDITOR.DIALOG_RESIZE_BOTH, 
minWidth: 720, 
minHeight: 480, 
contents: [{ 
id: 'cb', 
name: 'cb', 
label: 'cb', 
title: 'cb', 
elements: [{ 
type: 'select', 
label: 'Language', 
id: 'lang', 
required: true, 
'default': 'csharp', 
items: [['ActionScript3', 'as3'], ['Bash/shell', 'bash'], ['C#', 'csharp'], ['C++', 'cpp'], ['CSS', 'css'], ['Delphi', 'delphi'], ['Diff', 'diff'], ['Groovy', 'groovy'], ['Html', 'xhtml'], ['JavaScript', 'js'], ['Java', 'java'], ['JavaFX', 'jfx'], ['Perl', 'perl'], ['PHP', 'php'], ['Plain Text', 'plain'], ['PowerShell', 'ps'], ['Python', 'py'], ['Ruby', 'rails'], ['Scala', 'scala'], ['SQL', 'sql'], ['Visual Basic', 'vb'], ['XML', 'xml']] 
}, { 
type: 'textarea', 
style: 'width:700px;height:420px', 
label: 'Code', 
id: 'code', 
rows: 31, 
'default': '' 
}] 
}], 
onOk: function(){ 
code = this.getValueOf('cb', 'code'); 
lang = this.getValueOf('cb', 'lang'); 
html = '' + escape(code) + ''; 
editor.insertHtml("<pre class=\"brush:" + lang + ";\">" + html + "</pre>"); 
}, 
onLoad: function(){ 
} 
}; 
}); 

저 는"syntaxhighlighter"로 코드 하 이 라 이 트 를 만 듭 니 다.마음 에 들 지 않 으 면 다른 것 으로 바 꿀 수도 있 습 니 다.4.다음은 플러그 인 을 CKEditor 에 넣 는 것 입 니 다.저 는 CKEditor 플러그 인의 핵심 파일 을 직접 수정 합 니 다.왜냐하면 저 는'코드 삽입'기능 을 편집기 에 필요 한 기능 으로 사용 하기 때 문 입 니 다.ckeditor 디 렉 터 리 에 있 는"ckeditor.js"를 찾 았 습 니 다.이 코드 는 압축 된 것 입 니 다.우 리 는 CKEditor 의 원래 about 플러그 인 을 참고 합 니 다."about"을 찾 고"fullPage:false,height:200,plugins:"about,basicstyles"를 찾 으 면"about"뒤에"insertcode"를 추가 합 니 다.여 기 는"plugins:"about,insertcode,basicstyles"로 변 합 니 다.'about'을 계속 찾 고'j.add('about',{init:function(l){var m=l.addCommand('about',new a.dialogCommand('about'))를 찾 습 니 다.m.modes={wysiwyg:1,source:1};m.canUndo=false;l.ui.addButton('About',{label:l.lang.about.title,command:'about'});a.dialog.add('about',this.path+'dialogs/about.js');}});"，우 리 는 이 분점 뒤에"j.add(insertcode',{requires:['dialog'],init:function(l){l.addCommand('insertcode',new a.dialog Command('insertcode')를 추가 합 니 다.l.ui.addButton('insertcode', {label: l.lang.insertcode.toolbar,command: 'insertcode',icon: this.path + 'images/code.jpg'});a.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');}});"。 다음은"i.toolbar"를 찾 습 니 다.Basic=",이것 이 바로 CKEditor 의 기본 도구 모음 입 니 다.여기에"insertcode"를 추가 하면 원 하 는 위치 에 추가 할 수 있 습 니 다.예 를 들 어 나의'['Maximize','ShowBlocks','-','insertcode']'.5."ckeditor\lang"에 들 어가 면 각각"en.js","zh.js","zh-cn.js"에"insertcode:"Insert Code","insertcode:"세대 a 삽입","insertcode:"코드 삽입"을 추가 합 니 다.6.CKEditor 에 대한 수정 은 OK 입 니 다.그리고 마지막 단 계 는 하 이 라이트 코드 가 필요 한 페이지 에서 참조 하 는 것 입 니 다.syntaxhighlighter

 
<link type="text/css" rel="stylesheet" href="http://blog.moozi.net/wp-includes/js/syntaxhighlighter/styles/shCore.css"/> 
<link type="text/css" rel="stylesheet" href="http://blog.moozi.net/wp-includes/js/syntaxhighlighter/styles/shThemeDefault.css"/> 
<script type="text/javascript" src="http://blog.moozi.net/wp-includes/js/syntaxhighlighter/shCore.js"></script> 
<script type="text/javascript" src="http://blog.moozi.net/wp-includes/js/syntaxhighlighter/shBrushes.js"></script> 

이 네 개의 파일 은 syntaxhighlighter 의 다운로드 패키지 에 있 습 니 다.마지막 으로 페이지 에 JS:

 
<script type="text/javascript"> 
SyntaxHighlighter.config.clipboardSwf = 'http://img.jb51.net/js/syntaxhighlighter/clipboard.swf'; 
SyntaxHighlighter.all(); 
</script> 

압축 을 풀 고'syntaxhighlighter2.1.364\\scripts"디 렉 터 리 에"shBrushes.js"가 있 습 니 다.syntaxhighlighter 의 모든 하 이 라이트 코드 를 js 파일 에 추가 하여 http 요청 을 줄 입 니 다.CKEditor 의'코드 삽입'플러그 인 은 OK 입 니 다.평가 기능 은 코드 를 삽입 하여 하 이 라 이 트 를 표시 할 수 있다.이모 티 콘 플러그 인 도 수 정 했 는데 지금 은 QQ 이모 티 콘 을 사용 하고 있 습 니 다.이 수정 방법 이 필요 하신 분 은 메 시 지 를 남 겨 주세요.QQ 이모 티 콘 의 플러그 인 만 드 는 방법 을 붙 여 드 리 겠 습 니 다.다운로드 주소:https://www.jb51.net/codes/24883.html