Ckeditor plug-in with code inserted

Source: Internet
Author: User

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 = ""/>
<Link type = "text/CSS" rel = "stylesheet" href = ""/>
<SCRIPT type = "text/JavaScript" src = ""> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = ""> </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: // ';
Syntaxhighlighter. All ();

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.