Internet search for a number of related articles, much the same, I have been using CKEditor text editor, so try to use a lot of Internet users introduced syntaxhighlighter with CKEditor plug-in way to achieve. may be because Syntaxhighlighter and ckeditor version of different, the process encountered some problems, the solution is also based on personal understanding to do part of the adjustment, so the method described in this article for reference only.
introduction of Syntaxhighlighter
Syntaxhighlighter (formerly: Dp.syntaxhighlighter) is a set of independent JavaScript libraries that have syntax coloring of various code in the browser.
Download site: http://alexgorbatchev.com/SyntaxHighlighter/
Cloud Habitat Community Download: http://www.jb51.net/codes/15916.html
The version used in this article is a 3.0.83 version that only requires files in the "Scripts" and "Styles" folders under the Syntaxhighlighter folder, and the highlighted pages in code syntax coloring refer to "STYLES/SHCORE.CSS" style files, "Scripts/shcore.js" JS file, because each code language to refer to their own JS file, in order to reduce the HTTP request, all the code language JS file content into a "scripts/shbrushseayee.js" JS file, Write the code in one line and optimize it.
For example:
Copy Code code as follows:
<link rel= "stylesheet" type= "Text/css" href= "/syntaxhighlighter/styles/shcoredefault.css"/>
<script language= "javascript" type= "Text/javascript" src= "/syntaxhighlighter/scripts/shcore.js" ></script >
<script language= "javascript" type= "Text/javascript" src= "/syntaxhighlighter/scripts/shbrushseayee.js" >< /script>
ii. introduction of CKEditor
CKEditor is a WYSIWYG text editor that is specifically designed to be in the open source code on a Web page. It is focused on lightweight and does not require too complex installation steps to be used. It can be combined with different programming languages such as PHP, JavaScript, ASP, ASP.net, ColdFusion, Java, and ABAP. It was formerly known as FCKeditor, and was released in 2009 to 3.0 and renamed CKEditor. Originally called FCK, because the original developer called Frederico Calderia Knabben, now called CK, meaning "Content and knowledge." According to official explanations, CKEditor is a complete rewrite of FCKeditor's code, and the work began in 2007, with updates that include a new user interface, a JavaScript API that supports plug-in, and support for people with visual impairments.
Download site: http://ckeditor.com/
The version used in this article is 3.5.3 version, installation configuration is relatively simple, this article will not repeat.
Three, CKEditor code syntax coloring highlighting plug-in development
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 ',
{
Init:function (editor)
{
Plugin code goes here
var pluginname = ' Insertcode ';
CKEDITOR.dialog.add (pluginname, This.path + ' insertcode.js ');
Editor.config.flv_path = Editor.config.flv_path | | (This.path);
Editor.addcommand (Pluginname, New Ckeditor.dialogcommand (Pluginname));
Editor.ui.addButton (' Insertcode ',
{
Label: ' Insert Code ',
Command:pluginname,
Icon:this.path + ' insertcode.gif '
});
}
});
Note: In line 1th, "Insertcode" must be the same as the folder name and case-sensitive, because the path is case-sensitive in the Linux Web server.
2, "Insertcode" directory to be decentralized into a "insertcode.gif" 16*16 size of the picture, can do their own or online search.
3, "Insertcode" directory to create a new "Insertcode.js", enter the following code:
Copy Code code as follows:
CKEDITOR.dialog.add (' Insertcode ', function (editor) {
var escape = function (value) {return value;};
return{
Title: ' Insert Code ',
Resizable:ckeditor. Dialog_resize_both,
minwidth:720,
minheight:520,
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 '], [' ColdFusion ', ' CF '], [' C # ', ' CSharp '], [' C ' + ', ' cpp '], [' CSS ', ' CSS ', [' Delphi ', ' Delphi '], [' diff ', ' diff '], [' Groovy ', ' Groovy '], [' 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:718px;height:450px ',
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 () {}
};
});
4, in the "ckeditor\" directory to find the "config.js" file, this is the CKEditor configuration file, add the following code:
Copy Code code as follows:
Config.extraplugins = ' Insertcode ';
Note: the "Insertcode" in your code must also be the same as the folder name, distinguishing between uppercase and lowercase letters.
To add the button on the CKEditor toolbar to the ", Insertcode" in this profile, still be careful to distinguish between uppercase and lowercase letters. This is the result of this.
