Adding a plugin/buttons to nicedit isn't difficult. First make sure you have setup your your development environment then follow these steps:

1. Create a new folder for your plugin in src/, for this example i used nicExample
2. Make a file with the same name inside the folder src/nicExample/nicExample.js
3. You can use the below code as a starting point for your plugin

1. /**
2. * nicExample
3. * @description: An example button plugin for nicEdit
4. * @requires: nicCore, nicPane, nicAdvancedButton
5. * @author: Brian Kirchoff
6. * @version: 0.9.0
7. */
8.  
9. /* START CONFIG */
10. var nicExampleOptions = {
11.     buttons : {
12.         'example' : {name : __('Some alt text for the button'), type : 'nicEditorExampleButton'}
13.     }/* NICEDIT_REMOVE_START */,iconFiles : {'example' : 'src/nicExample/icons/save.gif'}/* NICEDIT_REMOVE_END */
14. };
15. /* END CONFIG */
16.  
17. var nicEditorExampleButton = nicEditorButton.extend({   
18.   mouseClick : function() {
19.     alert('The example save button icon has been clicked!');
20.   }
21. });
22.  
23. nicEditors.registerPlugin(nicPlugin,nicExampleOptions);

Car Shipping

PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  C: wait...

• Copy and paste the code to your JS file
• Create the icons directory in your plugin folder (like src/nicExample/icons) and put your icons (in this case save.gif in there)

To explain the different parts of the example:

/**

 * nicExample

 * @description: An example button plugin for nicEdit

 * @requires: nicCore, nicPane, nicAdvancedButton

 * @author: Brian Kirchoff

 * @version: 0.9.0

 */

This is a special comment block used by the nicEdit compression scripts and should appear on each plugin to be included in the downloader

Most of the fields are clear.  The @requires option should indicate which plugins are dependencies for your plugin (used by the download configurator)

/* START CONFIG */

var nicExampleOptions = {

    buttons : {

        'example' : {name : __('Some alt text for the button'), type : 'nicEditorExampleButton'}

    }/* NICEDIT_REMOVE_START */,iconFiles : {'example' : 'src/nicExample/icons/save.gif'}/* NICEDIT_REMOVE_END */

};

/* END CONFIG */

The config section is where you setup the button configuration for your plugin.  The 'type' option on the buttons object specifies the specific class to be used (or it would default to nicButton) where you put your buttons code. 

/* NICEDIT_REMOVE_START */

blocks are removed from output by the build scripts

iconFiles should point to a relative location of the individual gif button icons in development.  The key value 'example' in this case and the iconFiles item with the path must match.

/* START CONFIG */

Is only used to keep config sections from being whitespace compressed by the build script

var nicEditorExampleButton = nicEditorButton.extend({   

  mouseClick : function() {

    alert('The example save button icon has been clicked!');

  }

});

This is the class that defines your button, in this case we are overriding the mouseClick() to handle when the button is clicked

There is also a nicEditorAdvancedButton class that plugin buttons that need the pane functionality to have a form can use (see src/nicLink/nicLink.js) for an example of how you might do this.

nicEditors.registerPlugin(nicPlugin,nicExampleOptions);

This registers you plugin so that any new instances created will make use of it (make sure you use {fullPanel : true} or set a buttonList with the button id in this case 'example') so you can see your new button on the nicEdit toolbar

Coming soon:

- How to use the build scripts to package your plugin (not just run it as a separate JS file) once you have it working (for now email me or post your plugin on the forums, if its useful ill even include in the official nicedit downloader)

this weekends movie downloads

source for movie downloads