Skip navigation

rgeEditor Plugin Development

The rgeEditor plugin architecture is very straightforward, yet extremely powerful.

Since rgeEditor utilises the power of jQuery, millions of jQuery developers can easily create new and exciting plugins within rgeEditor. As a development house ourselves, we have created dozens of plugins to help our clients manage their content and widgets.

The opportunity to add plugins currently resides as two options. Firstly, to add a new context menu item to perform a specific task on a selected or global object types. Secondly, to detect specific criteria upon load / re-scoping and then detect amended criteria upon saving as a clean up process.

An example plugin that uses all of these features is one that resides within the plugin.js file for managing google maps.

  1. There is a context menu item allowing a user to insert a new google map
  2. There is a detection routine that finds any google map iframe’s and wraps them with "helper" based code for editing / amending.
  3. There is a detection routine during the save process that removes any helper code around google map iframe.

      The plugin code utilises rgeEditor’s built in "settings dialog" routine to create a new parameters panel and inject some input elements to manage the google maps parameters. Firstly reading the selected google map iframe source attributes and breaking them apart into separate manageable objects. Upon saving, it reforms the source attributes into a new google maps iframe object.

      Adding to the Context Menu

      You can add items to the context menu either as a heading or an option. The context menu works in two methods, the first is if an object is selected and the second is if there is a text selection, or you can use both. You can also pass in a restriction for a specific object type, for example an image ('img') or use ('*') for all object types. The icon class for the standard menu items have all utilised the Font Awesome icons, e.g. 'fa fa-database'. But you can assign your own classes (ensuring the CSS is accessible by rgeEditor) to place a different font icon / image based icon within the <i></i> tag. The func parameter allows you to define the function name to call when the context menu object is selected.

      rgeExtras.push({type:' [heading or option ] ',title: [label or heading] ':iconClass:' [class names] ',selection: [ boolean true|false ],object: [ boolean true|false ],restrictTo['*'],func:' [function name] '});

      Interacting with the selected object

      rgeEditor has a globally accessible object called $(OB) - this allows developers to manipulate the selected object. You can write new functions to interact or utilise some of rgeEditors functions if you choose to do so, for example wrapping the selected object within a new object.

      Interacting with selected text

      You can choose to write your own getSelection routines or utilise functions such as addTag(' [tagType] ')  for example to wrap content with a rarely used tag.


      rgeEditor continuously binds all objects as the user edits the content, if you need to ensure rgeEditor can interact with any new objects you place / inject into the content then simply call setScope();;

      Adding to the detection routines and cleanup routines

      There is a function at the bottom of the plugin.js code " extend scope " where you can add either the scExtend array or the saveExtend array. The items added are simply function to call that will run at the correct times during the initiation and finishing process.

      scExtend.push('myFunction1'); or saveExtend.push('myFunction2');

      These two functions can be used (within the scExtend example) detect a specific object type, object class or objects with specific attributes and then either wrap helpers or break-apart and store the object data into your own data objects. Or in the saveExtend example, remove helper wrappers or re-write code back to the content prior to saving.

      There are a few simple examples within the plugin code that show the above methodology working in practice. More complex plugins could very easily be written, for example creating your own 'shortcode' type system to place objects that fetch content via ajax calls from a live database to inject into your layout. This injected content could be made "non-interactive" and be removed when saving allowing you to push live data in via a server call when the content is actually rendered within the website (similar to how the shortcode system in WordPress work).

      Creating a dialog window from within your function

      Call the function settingsDialog(name,function,parameters);
      Name is the title of the dialog,
      Function is the function to call when create,
      Parameters is any objects you want to pass to the function.

      Then create a function that will populate the Dialog window by targeting a specific ID like so:

      $('#rgeSettingsContent').append('[your content]');

      You can remove the settings dialog when complete by using a function call such as:

      $('#rgeSettings').fadeOut(200,function(){$('#rgeSettings').remove(); addUndo('[Your undo name]');});

      The addUndo function simply records a DOM state and names it (for the undo / redo rollover title text) so you can easily undo any changes your function just made.

      We would defiantly recommend reviewing the plugins we’ve included within the plugin.js file as a reference point of how a plugin could be created. If you do get stuck and would like our team of developers to create a plugin for you, please get in contact and we can discuss your requirements and hopefully help you out.

      We’ve only just begun...

      Please remember, this is only version 1.0 of rgeEditor - feature packed with all the things that my team of developers  and our clients have needed or requested, but other developers / users may require other tools and features that we’ve never considered, so please do send us your comments and suggestions. The unique way rgeEditor is written and delivered means we can either fix bugs or write and add new features very easily and roll them out in realtime - everyone will get updated instantly.

      We will shortly be creating a bug list and a development list for users to post any issues or specific browser anomalies they may come across, we will prioritise these and provide feedback and or fixes and updates as quickly as possible.