Ckeditor plug-in development example

When editing a text, select a text section and click the Custom button to add an icon next to the text section. The icon hyperlink goes to an address and the selected text is used as a parameter.

CKeditor is FCKeditor. When releasing a new version, you have changed your name. Do not "F ".

Requirement: When editing a text, select a text section and click the Custom button to add an icon next to the text section. The icon hyperlink goes to an address, the selected text is used as the parameter.

Practice:

1. In the plugins folder of CKeditor, create the new folder "addmap". This name can be customized. This name is used in my project.

2. In the addmap folder, put a GIF image "map.gif" for use as an icon.

3. In the addmap folder, create "plugin. js" and edit the js file. The code here is:

Copy codeThe Code is as follows:
(Function (){
// Section 1: Code executed when you press the Custom button
Var a = {
Exec: function (editor ){
Var data = "";
Var mySelection = editor. getSelection ();
If (CKEDITOR. env. ie ){
MySelection. unlock (true );
Data = mySelection. getNative (). createRange (). text;
} Else {
Data = mySelection. getNative ();
}
If (data! = Null & data! = ''){
Editor. insertHtml (data + '<a href = "/map_index.html? Ad = '+ data +' "> </a> ');
}
}
},
B = 'addmap ';
CKEDITOR. plugins. add (B ,{
Init: function (editor ){
Editor. addCommand (B, );
Editor. ui. addButton ('addmap ',{
Label: 'add map link ',
Icon: this. path + 'map.gif ',
Command: B
});
}
});
})();

4. Return to the CKeditor root directory and edit config. js.

Copy codeThe Code is as follows:
CKEDITOR. editorConfig = function (config)
{
// Define changes to default configuration here. For example:
Config. language = 'zh-cn ';
// Config. uiColor = '# AADC6E ';
// Font.
Config. font_names = '; _ GB2312;; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana; ';
// Tool button
Config. toolbar =
[
['Source', '-', 'preview'],
['Cut ', 'copy', 'paste', 'pastetext ', 'pastefromword','-', 'print', 'link', 'unlink ', 'anchor'],
['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
['Addmap']
];

Config. extraPlugins = 'addmap ';

5. Test