Ckeditor plug-in with code inserted

By convention, ckeditor is a new-generation FCKeditor and a re-developed version. Ckeditor is one of the world's best online web text editors. It is widely used in various websites for its amazing performance and scalability.

Download ckeditor from the official website. I downloaded ckeditor_3.0.2. Ckeditor is too different from the original FCKeditor. As a developer, you always need to post your blogCodeTo insert code first. The highlighted Code uses syntaxhighlighter ".

1. Create an "insertcode" directory under the "ckeditor \ plugins \" directory, and then create a "plugin. js" under the "insertcode" directory. Enter the following code:Copy codeThe Code is as follows: ckeditor. plugins. Add ('insertcode ',{
Requires: ['Dialog '],
Init: function (){
VaR B = A. addcommand ('insertcode', new ckeditor. dialogcommand ('insertcode '));
A. UI. addbutton ('insertcode ',{
Label: A. Lang. insertcode. toolbar,
Command: 'insert ',
Icon: This. Path + 'images/code.jpg'
});
Ckeditor. Dialog. Add ('insertcode', this. Path + 'dialogs/insertcode. js ');
}
});

2. Add the "Images" directory and put a "code.jpg" image. Of course, you can find one image from Google, which is 16*16 in size.

3. Add the "dialogs" directory and create an "insertcode. js". Enter the following code:

Insertcode. js Copy code The Code is 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 ', 'delphi'], ['diff ', 'diff'], ['groovy ', 'groovy'], ['html ', 'xhtml'], ['javascript ', 'js'], ['java ', 'javafx'], ['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: 'textea ',
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 use "syntaxhighlighter" for code highlighting. If you don't like it, you can change it to another one.

4. Add the plug-in to ckeditor. I directly modify the core file of the ckeditor plug-in, because I use the "insert code" function as a necessary function of the editor.

Find "ckeditor. js" under the ckeditor directory. The code here is compressed. We will use the original ckeditor about plug-in for reference. Find "about" and find "fullpage: false, height: 200, plugins: 'about, basicstyles". We will add ", insertcode ", here it becomes "plugins: 'about, insertcode, basicstyles ".

Continue to "about" and find "J. add ('about', {init: function (l) {var M = L. addcommand ('about', new. dialogcommand ('about'); M. modes = {WYSIWYG: 1, source: 1}; M. canundo = false; L. UI. addbutton ('about', {label: l. lang. about. title, command: 'about'});. dialog. add ('about', this. path + 'dialogs/about. JS ') ;}}); ", we add" J. add ('insertcode', {requires: ['Dialog '], init: function (l) {L. addcommand ('insert', new. dialogcommand ('insertco De '); L. UI. addbutton ('insertcode', {label: l. lang. insertcode. toolbar, command: 'insert', icon: This. path + 'images/code.jpg '});. dialog. add ('insert', this. path + 'dialogs/insertcode. JS ');}});".

Next, find "I. toolbar_basic =", which is the default tool bar of ckeditor. Here we add ", insertcode", which can be added to the desired position. For example, my "['delimiter', 'showbucket', '-', 'insertcode']".

5. Go to "ckeditor \ Lang" and go to "en. JS "," Zh. JS "," added in "zh-cn.js", insertcode: 'insert Code' ",", insertcode: 'insert generation encoding' ",", insertcode: 'insert Code '".

6. Modify ckeditor. The last step is to reference it on the page where you need to highlight the Code:

SyntaxhighlighterCopy codeThe Code is 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 available in the syntaxhighlighter download package. Finally, add the JS file on the page:Copy codeThe Code is as follows: <SCRIPT type = "text/JavaScript">
Syntaxhighlighter. config. clipboardswf = 'HTTP: // img.jb51.net/js/syntaxhighlighter/clipboard.swf ';
Syntaxhighlighter. All ();
</SCRIPT>

After decompression, there is "shbrushes. js" in the "syntaxhighlighter_2.1.364 \ scripts" directory. I add all the highlighted syntaxhighlighter codes to a JS file to reduce HTTP requests.

Ckeditor's "insert code" plug-in is OK.

You can insert code to highlight the evaluation function. At the same time, I also modified the emoticons plug-in. Now I am using QQ's emoticons. If you need this modification method, please leave a message. I will post the production method of the QQ expression plug-in.

: Http://www.jb51.net/codes/24883.html