Writing plugins

Writing a plugin for WYMeditor is quite easy, if you have a basic knowledge of jQuery and Object Oriented Programming in Javascript.

Once you decide the name for your plugin you should create a folder of that name in the plugins folder and then a file called jquery.wymeditor.plugin_name.js. You need to include this file in your HTML using a <script> tag. For more details on using plugins see Plugins.

For details on interacting with the editor, including the selection, see Api

Example plugin

  // wymeditor/plugins/hovertools/jquery.wymeditor.hovertools.js
  // Extend WYM
  Wymeditor.prototype.hovertools = function() {
	  var wym = this;
	  
	  //bind events on buttons
	  $j(this._box).find(this._options.toolSelector).hover(
		function() {
		wym.status($j(this).html());
		},
		function() {
		wym.status(' ');
		}
	  );
  };

This example extends WYMeditor with a new method 'hovertools', and uses jQuery to execute a function while the mouse hovers over WYMeditor tools.

this._box is the WYMeditor container, this._options.toolSelector is the jQuery selector, wym.status() displays a message in the status bar.

Adding a button to the tool bar

// Find the editor box
var wym = this,
    $box = jQuery(this._box);

//construct the button's html
var html = '' +
    "<li class='wym_tools_fullscreen'>" +
        "<a name='Fullscreen' href='#' " +
            "style='background-image: url(" +
                wym._options.basePath +
                "plugins/fullscreen/icon_fullscreen.gif)'>" +
            "Fullscreen" +
        "</a>" +
    "</li>";
//add the button to the tools box
$box.find(wym._options.toolsSelector + wym._options.toolsListSelector)
    .append(html);

(work in progress)