By convention, the first piece of nonsense: CKEditor is a new generation of FCKeditor, is a newly developed version. CKEditor is one of the best online text editors in the world, and is widely used in all major websites for its amazing performance and scalability.
Download CKEditor from the official website, I downloaded is ckeditor_3.0.2. 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:
Copy Code code as follows:
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, of course, the picture can be found from Google, 16*16 size of the good.
3, add "dialogs" directory, create a new "Insertcode.js", enter the following code:
Insertcode.js
Copy Code code as follows:
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 ', ' de Lphi '], [' 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 () {
}
};
});
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. Find "about", find "fullpage:false,height:200,plugins: ' About,basicstyles", we add "about" after ", Insertcode", here becomes "plugins:" About,insertcode,basicstyles ".
Continue to find "about" and 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 Password '", ", Insertcode: ' Insert code '.
6, the modification of the CKEditor has been OK, and the last step is in you need to highlight the code page reference:
Syntaxhighlighter
Copy Code code as follows:
<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>
These four files are in the Syntaxhighlighter download package, and finally, add this section JS on the page:
Copy Code code as follows:
<script type= "Text/javascript" >
SYNTAXHIGHLIGHTER.CONFIG.CLIPBOARDSWF = ' http://img.jb51.net/js/syntaxhighlighter/clipboard.swf ';
Syntaxhighlighter.all ();
</script>
After decompression "syntaxhighlighter_2.1.364\scripts" directory has "Shbrushes.js" is I syntaxhighlighter all the highlight code to add to a JS file, reduce the HTTP request.
The CKEditor "Insert Code" plugin is OK.
The evaluation function can be inserted into the code for highlighting. At the same time also modified the expression plug-in, is now using the QQ expression package. There is a need to modify the method of friends, please leave a message, I will be the QQ expression of plug-in production methods posted.
Download Address: http://www.jb51.net/codes/24883.html
