Add the code highlight plug-in syntaxhighlighter to ckeditor.

 

(Source: http://ipc.javaeye.com/blog/695393)

Ckeditor is a new generation of FCKeditor, which is a redevelopment 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.

 

From the official website

Download ckeditor. I downloaded ckeditor 3.3.1.
. Ckeditor is too different from the original FCKeditor. As a developer, you always need to post code when creating your own blog, so you have to create a plug-in for inserting code. 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:

JS Code Ckeditor. plugins. add ('insertcode', {<br/> requires: ['did'], <br/> init: function (a) {<br/> var B =. addcommand ('insert', new ckeditor. dialogcommand ('insert'); <br/>. UI. addbutton ('insertcode', {<br/> label:. lang. insertcode. toolbar, <br/> command: 'insert', <br/> icon: This. path + 'images/code.jpg '<br/>}); <br/> ckeditor. dialog. add ('insert', this. path + 'dialogs/insertcode. js'); <br/>}< br/> });

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 the "Images" directory and put a "code.jpg" image (the attachment uploads a code jpg image, which can be directly used ).

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

JS Code Ckeditor. dialog. add ('insert', function (editor) {<br/> var escape = function (value) {<br/> return value; <br/> }; <br/> return {<br/> title: 'insert Code dialog ', <br/> resizable: ckeditor. dialog_resize_both, <br/> minwidth: 720, <br/> minheight: 480, <br/> contents: [{<br/> ID: 'cb ', <br/> name: 'cb ', <br/> label: 'cb', <br/> title: 'cb ', <br/> elements: [{<br/> type: 'select', <br/> label: 'language', <br/> ID: 'lang ', <br/> required: True, <br/> 'default': 'csharp ', <br/> 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 '], ['powers', 'ps'], ['python ', 'py'], ['Ruby ', 'rails'], ['scala ', 'scala'], ['SQL', 'SQL'], ['visual basic ', 'vb'], ['xml', 'xml'] <br/>},{ <br/> type: 'textea ', <br/> style: 'width: 700px; Height: 420px ', <br/> label: 'code', <br/> ID: 'code ', <br/> rows: 31, <br/> 'default': ''<br/>}] <br/>}], <br/> onok: function () {<br/> code = This. getvalueof ('cb ', 'code'); <br/> lang = This. getvalueof ('cb ', 'lang'); <br/> html = ''+ escape (CODE) +''; <br/> editor. inserthtml ("<PRE class =/" Brush: "+ Lang +";/">" + HTML + "</PRE>"); <br/> }, <br/> onload: function () {<br/>}< br/>}; <br/> });

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(){        }    };});

 

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", find "fullpage: false, height: 200, plugins: 'about, basicstyles
", We will add", insertcode "after" about ", which will be" plugins: 'about, insertcode ".
, Basicstyles ".

 

Continue to "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'});. dialog. add ('about', this. path + 'dialogs/about. js ');}});
", We add" 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: 'insert', icon: This. Path +
'Images/code.jpg '}); A. Dialog. Add ('insert', this. Path +
'Dialogs/insertcode. js ');}});
".

 

Next, find "I. toolbar_basic =", which is the default tool bar of ckeditor. We will add ", insertcode
", You can add it to the position you want. For example, my "['maximize', 'showbuckets', '-', 'insertcode']
".

 

5. Enter "ckeditor/lang", add ", insertcode: 'insert Code' in" EN. js "," Zh. js "," zh-cn.js ", respectively'
",", Insertcode: 'insert generation latest'
",", Insertcode: 'insert Code'
".

 

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

HTML code

1. <
   Link
    
   Type
   =
   "Text/CSS"
    
   REL
   =
   "Stylesheet"
    
   Href
   =
   "JS/syntaxhighlighter/styles/shcore.css"
   />
   
   
2. <
   Link
    
   Type
   =
   "Text/CSS"
    
   REL
   =
   "Stylesheet"
    
   Href
   =
   "JS/syntaxhighlighter/styles/shthemedefault.css"
   />
   
   
3. <
   Script
    
   Type
   =
   "Text/JavaScript"
    
   SRC
   =
   "JS/syntaxhighlighter/scripts/shcore. js"
   >
   </
   Script
   >
   
   
4. <
   Script
    
   Type
   =
   "Text/JavaScript"
    
   SRC
   =
   "JS/syntaxhighlighter/scripts/shbrushes. js"
   >
   </
   Script
   >
   
   

<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>

 

These four files are available in the syntaxhighlighter download package. Finally, add the JS file on the page:

JS Code

1. <SCRIPT type =
   "Text/JavaScript"
   >
   
2. Syntaxhighlighter. config. clipboardswf = 'js/syntaxhighlighter/scripts/clipboard.swf'
   ;
   
3. Syntaxhighlighter. All ();
4. </SCRIPT>

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

 

 

 

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