eWebEditor Home >> eWebEditor Manual V11.2 >> Developer Guide >> Custom Function

3.9.1 Add a Custom Button in the Toolbar

1. Make a button picture of width height 16*16 and put it at the skin directory, for example, the coolblue is at skin/office2003/ by default. You can name the file by yourself, for example, my gif. 

2. Add a button definition and a format for js/buttons.js as follows:

"Site"                   : [118, "", "Btn", 0],                  // self-contained in the system

"MyButtonKey"     : ["my.gif", "DoMyFunction()", "Btn", 0],    // Custom added


   MyButtonKey: Button Keywords

   my.gif: Filename of the picture

   DoMyFunction: Method to call when clicking


3. language/en.js is language package File. Add a button for the language package as follows:

lang["MyButtonKey"] = "This is my button"


4. In the js/ewebeditor_ie.js and js/ewebeditor_gecko.js, add specific scripts.

   function DoMyFunction(){

       // Add according to actual needs

          alert("Hi, this is my button.");



5. Enter the background of editor, style management, and click "Toolbar" management, and add the custom button you just make to the desired place on the interface.

6. Finish.