• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Social distancing? Try a better way to work remotely on your online files. Dokkio, a new product from PBworks, can help your team find, organize, and collaborate on your Drive, Gmail, Dropbox, Box, and Slack files. Sign up for free.

View
 

Creating a Plugin

Page history last edited by dan 9 years, 11 months ago

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);

 

  • 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

Comments (3)

Gytha_Ogg said

at 11:05 am on Apr 24, 2009

Nicedit seems to be great. However, my problem is that I must count characters in textareas, because users must be warned when their text is too long. Is there such a plugin that would work with Nicedit ?

Jenny Fox said

at 4:16 pm on Jul 16, 2009

Bensg - I've been trying to work with this example, but I'm having trouble. I have a new button, with the proper icon, and when clicked it brings up an alert. But I don't want it to bring up an alert, I want this button to clear the field. I cannot for the life of me figure out which variable contains the contents of the field, or how I can reset it to blank. Do you have any suggestions?

--jenny

Bryan W said

at 12:40 am on Jul 28, 2009

this.ne.selectedInstance.setContent(''); inside the mouseClick of your button class should clear the contents of the selected editor instance. You may want to if (this.ne.selectedInstance) it to make sure it doesn't cause errors as it is null when no instance has focus.

You don't have permission to comment on this page.