CKEditor에 syntaxhighlighter 코드 강조 플러그인 추가

홈페이지에서 ckeditor를 다운로드합니다. 제가 다운로드한 것은 CKEditor 3.3.1입니다.CKEditor는 원래의 FCKeditor와 너무 다르다. 개발자로서 자신의 블로그를 할 때 항상 코드를 붙여야 하기 때문에 코드를 삽입하는 플러그인을 먼저 만들어 줄 수밖에 없다.하이라이트 코드는 "Syntax Highlighter"를 사용합니다.
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"그림을 넣습니다. (첨부 파일에 코드의 jpg 사진이 업로드되어 직접 사용할 수 있습니다.)
3. "dialogs"디렉터리를 추가하고 "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'}); t', this.path+'dialogs/about.js');};",우리는 이 번호 뒤에"j.add('insertcode', {requires: ['dialog'], init: function(l) {l.addCommand('insertcode', new a.dialogCommand('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','Show Blocks','-','insertcode']'이다.
5.'ckeditor/lang'에 들어가면 각각'en.js','zh.js','zh-cn.js'에서'insertcode:'insert Code','insertcode:'삽입 대 a',', insertcode:'코드 삽입'을 추가한다.
6, CKEditor에 대한 수정은 OK, 그리고 마지막 단계는 하이라이트 코드가 필요한 페이지에서 참조하는 것입니다.

<link type = "text/css" rel = "stylesheet" href ="js/syntaxhighlighter/styles/shCore.css" /> 
<link type = "text/css" rel = "stylesheet" href ="js/syntaxhighlighter/styles/shThemeDefault.css" /> 
<script type = "text/javascript" src = "js/syntaxhighlighter/scripts/shCore.js" > </script> 
<script type = "text/javascript" src = "js/syntaxhighlighter/scripts/shBrushes.js" ></script> 

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

<script type= "text/javascript" > 
SyntaxHighlighter.config.clipboardSwf= 'js/syntaxhighlighter/scripts/clipboard.swf' ; 
SyntaxHighlighter.all(); 
</script>

CKEditor의 코드 삽입 플러그인은 OK입니다.
알림 버그
수정한 후 insertcode 아이콘의 제목이 비어 있습니다.나는 너의 코드 중의 "label: a.lang.insertcode.toolbar"(총 2곳) 를 "label: a.lang.insertcode"로 바꾸었다.해결!