CKEditor add syntaxhighlighter Code Highlighting plugin _ Web editor

Download CKEditor from the official website, I downloaded is CKEditor 3.3.1. CKEditor and the original FCKeditor is too different, as a developer, in doing their own blog always need to paste code, had to give it a plug-in to insert the code first. The highlight code is "Syntaxhighlighter".

1. Create a new "Insertcode" directory under the "ckeditor/plugins/" directory, and then create a new "Plugin.js" in the "Insertcode" directory, enter the following code:

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, add "Images" directory, put in a "code.jpg" picture (attachment upload a code JPG image, you can use directly).

3, add "dialogs" directory, create a new "Insertcode.js", enter the following code:

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, ' d Efault ': ' 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 ', ' p Y '], [' Ruby ', ' rails '], [' Scala ', ' Scala '], [' SQL ', ' SQL '], [' Visual Basic ', ' VB '], [' XML ', ' XML ']]}, {type: ' t Extarea ', 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 () {}};  });

I am using "syntaxhighlighter" to do code highlighting, if you do not like it can also be replaced by other.

4, the next is to add Plug-ins to the CKEditor, I was directly modify the CKEditor plug-in core files, because I was the "Insert Code" function as an editor necessary function to use.

Find the "Ckeditor.js" in the CKEditor directory, the code here is compressed, we use the ckeditor of the original about Plug-ins for reference. Look for "about", find "fullpage:false,height:200,plugins: ' about,basicstyles ", we added "about" after ", Insertcode ", here becomes" plugins: ' About, Insertcode , Basicstyles ".

    continue to find "about", find " 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 ');   ", we Add" j.add (' Insertcode ', {requires: [' dialog ') after this semicolon. 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 ');   .

Next look for "i.toolbar_basic=", which is the CKEditor default toolbar, where we add ", Insertcode ," and you can add it to where you want it. Like my "[' Maximize ', ' showblocks ', '-', ' Insertcode ']".

5, into the "Ckeditor/lang", respectively in the "En.js", "Zh.js", "Zh-cn.js" added ", Insertcode: ' Insert Code ' ", ", Insertcode: ' Insert code ' , ', 'insertcode: ' Insert codes '.

6, the modification of the CKEditor has been OK, and the last step is in you need to highlight the code page reference:

<link type = "Text/css" rel = "stylesheet" href = "js/syntaxhighlighter/styles/shcore.css"/> 
<link type = "Te Xt/css "rel =" stylesheet "href =" js/syntaxhighlighter/styles/shthemedefault.css "/> 
<script type =" text/ JavaScript "src = js/syntaxhighlighter/scripts/shcore.js" > </script> 

These four files are in the Syntaxhighlighter download package, and finally, add this section JS on the page:

<script type= "Text/javascript" > 
syntaxhighlighter.config.clipboardswf= ' js/syntaxhighlighter/scripts/ Clipboard.swf '; 
Syntaxhighlighter.all (); 
</script>

The CKEditor "Insert Code" plugin is OK.

Tip A small bug

After modification, the title of the Insertcode icon is empty. I'll change the "Label:a.lang.insertcode.toolbar" (2) in your code to "Label:a.lang.insertcode". Solve!