Ckeditor + code highlighting

Recently, I want to build a code library in the form of a website and write an online text editor. It is really impractical for me to come here! Now we have a very good online text editor (ckeditor). I have to wait for a while! There are ready-made ones. If you have used them, you can! This is what comes to mind! However, this online text editor is a defect for our programmers! No code highlighting function! It looks bad to paste the code like this! This evening, I always gave him out. Of course, it is also made on the shoulders of others. Thank you for sharing them! Not much talk! Let's get started!
First download a ckeditor from the official website.
Next, go to the official website to download a syntaxhighlighter. This is the code highlight plug-in.
After the download, decompress them and add them to the project, as shown below:
 

Create a folder named "insertcode" under ckeditor and create a "plugin. js" under the "insertcode" directory. Enter the following code:

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 ');
}
});

 
The directory structure is shown in figure 2.

 

Create another images folder and put it into a "code.jpg" image, as shown in. Of course, you can find one image from google, which is 16*16 in size.
Create a new dialogs folder and create an "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,
'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 (){
}
};
});

Next, we will insert the highlighted plug-in into ckeditor and find "ckeditor. js" in the ckeditor folder ". Press ctrl + F to find "about" and find "fullPage: false, height: 200, plugins: 'about, basicstyles". We will add ", insertcode" after "about ", 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 ');}});".
For example:
Next, go to ckeditor. search for "I. toolbar_Basic = ", which is the default tool bar of CKEditor. Here we add", insertcode ", for example, my" ['maxmize', 'showbuckets ','-', 'insert']"
Where I add the selected text:

Last step: Go to "ckeditor \ lang". Note that. js "," zh. js "," added in "zh-cn.js", insertcode: 'insert Code' ",", insertcode: 'insert generation encoding' ",", insertcode: 'insert Code '", you must add them in this order.
If en. js in, zh-cn.js, zh. js I will not one by one.
 


Add the following reference on the page:

 

View Code
<Link type = "text/css" rel = "stylesheet" href = "syntaxhighlighter_3.0.83/styles/shCore.css"/>
<Link type = "text/css" rel = "stylesheet" href = "syntaxhighlighter_3.0.83/styles/shThemeDefault.css"/>
<Script type = "text/javascript" src = "syntaxhighlighter_3.0.83/scripts/shCore. js"> </script>
<Script type = "text/javascript" src = "syntaxhighlighter_3.0.83/scripts/shBrushes. js"> </script>
<Script type = "text/javascript" src = "ckeditor/ckeditor. js"> </script>

 
The page code is as follows:
View Code
<Form id = "form1" runat = "server">
<Div>
<Asp: TextBox ID = "txtcontent" runat = "server" TextMode = "MultiLine" Height = "503px" Width = "100%"> </asp: TextBox>
<Script type = "text/javascript">
CKEDITOR. replace ('<% = txtcontent. ClientID %>', {skin: 'office2003 '});
</Script>
</Div>
</Form>

How can I get the text in this text editor and write it again today! It's time to go to bed. It's over 1 o'clock, O My god!
The road ahead is so dark ......

 

From dream chaser