Home > Developer > Ajax

Detailed description of custom ckeditor Toolbar

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Yesterday, we needed to customize the ckeditor editor toolbar and add a plug-in as a requirement. Next I will introduce my recording notes to you, so you can learn it as needed.

1. Download and install ckeditor.

2. Custom toolbar buttons:

You can customize the buttons to be displayed in the ckeditor toolbar. For more information about the toolbar button definition, see here.

Now we need to add a custom function button to the toolbar. Each button in the ckeditor toolbar is defined in the ckeditorplugins directory as a plug-in. Create a new folder linkbutton in ckeditorplugins. In the linkbutton folder, create a plugin. js file with the following code:

The Code is as follows: Copy code

(Function (){
// Section 1: Code executed when you press the Custom button
Var a = {
Exec: function (editor ){
Alert ("this is a custom button ");
}
},
// Section 2: create a custom button and bind a method
B = 'linkclick ';
CKEDITOR. plugins. add (B ,{
Init: function (editor ){
Editor. addCommand (B, );
Editor. ui. addButton ('linkclick ',{
Label: 'link click ',
Icon: this. path + 'logo_ckeditor.png ',
Command: B
});
}
});
})();

In the authorization code, we define the custom map logo_ckeditor.png, And the logo_ckeditor.png is placed in the linkbutton folder.
Next we need to register the linkbutton plug-in

-The method provided in adding-a-new-toolbar-button/original text is to register in ckeditor. js, which makes it difficult to upgrade the new version in the future. We recommend that you use the following method to register a custom plug-in config. js:

The Code is as follows: Copy code

CKEDITOR. editorConfig = function (config)
{
// Define changes to default configuration here. For example:
// Config. language = 'Fr ';
// Config. skin = 'office2003 ';
Config. extraPlugins = "linkbutton"
};

Finally, display the Custom button linkbutton in ckeditor. The Code is as follows:

The Code is as follows: Copy code

<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Custom button </title>
<Script type = "text/javascript" src = "ckeditor. js"> </script>
<Style type = "text/css">
Body {font-size: 12px; line-height: 1.8; font-family: ' ';}
</Style>
</Head>
 
<Body>
<Textarea id = "ckeditor"> </textarea>
<Script type = "text/javascript">
CKEDITOR. replace ('ckeditor ',{
Toolbar:
[
['Bold ', 'italic', '-', 'numberedlist', 'bulletedlist ','-', 'link', 'unlink ','-', 'linkclick']
],
ExtraPlugins: "linkbutton" // register the linkbutton. You can also register the linkbutton in config. js.
});
</Script>
</Body>
</Html>

Note: The names of custom plug-ins must be consistent anywhere.


Write a demo.html file for testing

Create a demo.html file in the ${ckeditor}root directory to test whether the plug-in we just wrote is effective. The content is as follows:

The Code is as follows: Copy code

<Html>


After you open the demo.html file in the browser, you can see that the last plug-in we just wrote is in the toolbar of the editor, as shown in:

 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
description of sunrise description of visual studio function of mini toolbar description of core iphone description of features description of net get rid of ask toolbar
Related Article
The difference between traditional web development patterns a...
JQuery ajax File Download _ajax
Ajax various implementation methods compare _ajax
Ajax Getting Started Guide (ii)
SPRINGMVC passing a parameter list object through Ajax or pas...

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More