Ckeditor add Custom button

1. Download ckeditor. Here we download ckeditor 3.6.2.

2. There are compressed code and source code in it. The directory where the source code is located is _ source. There are some examples for use.

In this section, you need to add a Custom button during use.

 

2. For example, I want to add the "insert code" button and name it code. Create a new codefolder under ckeditor/plugins, add a small image such as code.gif to the codefolder, and then create a plugin. js file in the code folder. The content is as follows:

// One-click Layout
(Function (){

B = 'format _ wz ';

Ckeditor. plugins. Add (B ,{

Requires: ['styles ', 'click'],

Init: function (){

A. addcommand (B, ckeditor. plugins. AutoFormat. commands. AutoFormat );

A. UI. addbutton ('format _ wz ',{

Label: "one-click layout ",

Command: 'format _ wz ',

Icon: This. Path + "format_wz.png"

});

}

});

Ckeditor. plugins. AutoFormat = {

Commands :{

AutoFormat :{

Exec: function (editor ){

Formattext (editor );

}

}

}

};

// Execution Method
Function formattext (editor ){

VaR myeditor = editor;

// Obtain the source code to edit
VaR editorhtml = myeditor. getdata ();
// Execute your operations here .....

Editorhtml = editorhtml. Replace (/(<\/? (?! BR | p | IMG | A | H1 | H2 | H3 | H4 | H5 | H6) [^> \/] *) \/?> /GI ,'');
// Add a style to the P label so that each section is automatically Indented by two characters
Editorhtml = editorhtml. Replace (/\ <[p | p]>/g, "<P style = 'text-indent: 2em '> ");

// Put the content back in the editor
Editor. setdata (HTML );

}

})();

3. Modify config. js to register the code plug-in. Use the following code to replace the original content of config. JS:

 

Ckeditor. editorconfig = function (config ){

// Configure ckfinder

Config. extraplugins = "code, uploadimg ";

// Create a plug-in config. toolbar_temp = [

{Name: 'document', items: ['code', 'format _ wz', 'save']},

{Name: 'styles ', items: ['styles', 'format', 'font', 'fontsize']}];

Config. toolbar_full = [

{Name: 'document', items: ['code', 'source', '-', 'format _ wz', '-', 'save', 'newpage ', 'docprops', 'preview', 'print', '-', 'templates']},

{Name: 'tool', items: ['maximize', 'showbuckets', '-', 'about']}];

};

Note that my ckeditor configuration is completed by modifying config. js.

4. Install ckeditor and add the following JS Code to the script tag on the page to introduce ckeditor:

VaR editor = ckeditor. Replace ('P _ content_content ',{
Fullpage: True,
Extraplugins: 'uploadimg, format_wz, docprops'
});
Ckfinder. setupckeditor (Editor, 'ckfinder ');

5. Refresh the page and you will see the button you added.