• (_)YourPlugin
  • getHtml

This is just a helper object for you to store your own functions, shielded away from other globals and namespaced by YourPlugin.

To use, simply rename YourPlugin (in your-plugin/js/helper-methods.js) to your desired name, then in the onLoad() method for your dialog (in `your-plugin/dialogs/main.js), insert the following JavaScript:

...
// dialog methods
...
onLoad: function() {
  // add id for easier styling of elements in the dialog
  $(this.getElement()).attr('id', plugin.dialog);

  // ADD THE BELOW CODE
  // initialize YourPlugin object (with your renamed variable)
  YourPlugin = new _YourPlugin(path); // path is the plugin path (defined at the top of the main.js file)
},
...

Note that in the helper-methods.js file, there is a _ prefix for YourPlugin. This is just to avoid a variable clash if the helper object is instantiated later on by the dialog (e.g. with the CKEditor AJAX sample file ajax.html).

The object is simply a helper, and you can use a completely different way to add helper functions to your plugin. This documentation is here for completeness; you may freely add/remove methods from the YourPlugin object template when you use it.

YourPlugin.getHtml(filename, $div)

Loads html template from /html folder into a <div>.

<h2>Plugin Title</h2>
<p>A short description for the top of your dialog.</p>

...
// fields
...
{
  // description field
  id: 'description',
  type: 'html',
  html: '',
  className: 'description', // for selecting the field more easily
  onLoad: function() {
    var $div = $('#' + plugin.dialog + ' .description');

    // load contents of description.html into this plain div
    YourPlugin.getHtml('description', $div);
  },
},
...