CKEditor syntaxhighlighter code Highlighting plug-in configuration sharing _ Web Editor

Recently because I want to do a website form of the code base, since the writing of an online text editor, for now I come, is really unrealistic, hehe! Besides, now there is a very good online text editor (CKEditor), and I will go to the cost of such kungfu! There are ready-made, took the use is the Bai! The so-called copycat! But this online text editor, for our programmers is a flaw it! No code highlighting feature! So put the code up, it is not good-looking! I always get him out of here this evening. Of course they are made on the shoulders of others. Thank them for sharing here! Crap don't say much! Let's get to the point!

First go to the official website to download a ckeditor

Next to the official website to download a syntaxhighlighter, this is the code highlighting plug-ins.

And the Syntaxhighlighter/shbrushes.js file in the demo I downloaded below.

After downloading, unzip them and join the project as follows:

Then create a new folder under CKEditor named: Insertcode, then create a new "Plugin.js" in the "Insertcode" directory, and enter the following code:

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

The directory structure is as follows: Figure II

Then create a new images folder, put in a "code.jpg" picture, as shown above, of course the picture can be found from Google, 16*16 size of the good.

Create a new Dialogs folder, create a new "Insertcode.js", and 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 # ', ' C Sharp '], [' 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 '], [' Po  Wershell ', ' 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 () {}}; });

Next, we insert the highlight plugin into the CKEditor to find the "Ckeditor.js" under the CKEditor folder. Press Ctrl+f to find "about", find "fullpage:false,height:200,plugins: ' About,basicstyles", we add "about" after ", Insertcode", here becomes " Plugins: ' About,insertcode,basicstyles '.

As shown in figure:

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

The following figure:

Then continue to look for "i.toolbar_basic=" in Ckeditor.js, which is the CKEditor default toolbar, where we add ", Insertcode", such as my "[' Maximize ', ' showblocks ', '] ', ' Insertcode ']

I add the text selected in the following figure to that place:

The final step: Enter the "Ckeditor\lang", please note that in the "En.js", "Zh.js", "Zh-cn.js" added ", Insertcode: ' Insert Code '", ", Insertcode: ' Insert code ', ', Insertcode: ' Insert Codes ', must be in this order add OH.

The following figure is in the en.js, zh-cn.js,zh.js I will not have a screenshot.

Finally, add the following reference to the page:

The code for the page is as follows:

<form id= "Form1" runat= "Server" >
  <div>
    <asp:textbox id= "txtcontent" runat= "Server" textmode= "MultiLine" height= "310px" 
      width= "100%" ></asp:TextBox>
    <script type= "Text/javascript" >
      ckeditor.replace (' <%= txtcontent. ClientID%> ', {skin: ' office2003 '});
    </script> 
    </script>--%>
    <asp:button runat= "Server" text= button "onclick=" unnamed1_ Click "/>
  </div>
  <asp:literal id=" Literal1 "runat=" Server "></asp:Literal>
  < /form>

Background code:

Copy Code code as follows:

protected void Unnamed1_click (object sender, EventArgs e)
{
This. Literal1.text = txtcontent. Text;
}

Also, add validaterequest= "false" to the @ Page directive of the pages and add the following @page instructions:

Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default" validaterequest= " False "%>

Otherwise it will be an error.

Effect Chart:

How to get the text in this text editor write it in the daytime today! It's time to go to bed, more than 1 O my god!

(O ye! It's always perfect now.)

My Demo Download: Cheditor+syntaxhighlighter demo, if still a bit do not understand, please refer to this demo, or give me a message!

Reference Blog: http://zhidao.baidu.com/question/302527067.html
Http://blog.sina.com.cn/s/blog_5fdcf5c90100uo4r.html
Http://www.jb51.net/article/58407.htm