The WYMeditor includes a simple plugin which demonstrates how easy it is to write plugins for WYMeditor. See Plugin System Architecture for more details.
Note
Next versions will use a more advanced events handling architecture which will allow a better interaction between plugins and the editor.
To use a plugin you need to include it’s script file using a <script> tag and then initialize it (passing an instance of wym) in the postInit function, passed as an option when you call $().wymeditor().
postInit: function(wym) {
//activate the 'tidy' plugin, which cleans up the HTML
//'wym' is the WYMeditor instance
var wymtidy = wym.tidy();
// You may also need to run some init functions on the plugin, however this depends on the plugin.
wymtidy.init(wym);
}
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 details on interacting with the editor, including the selection, see API.
// 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.
// 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)
embed
Add Description
fullscreen
Add Description
hovertools
This plugin improves visual feedback by:
list
Add Description
rdfa
Add Description
resizable
Add Description
table
Add Description
tidy
Add Description
modal_dialog (by samuelcole)
https://github.com/samuelcole/modal_dialog
Replaces the default dialog behaiour (new window) with a modal dialog. Known bug in IE, more information here.
alignment (by Patabugen)
https://bitbucket.org/Patabugen/wymeditor-plugins/src
Set Text Alignment with classes.
site_links (by Patabugen)
https://bitbucket.org/Patabugen/wymeditor-plugins/src
A plugin to add a dropdown of links to the Links dialog, especially for making it easier to link to your own site (or any other predefined set).
Can also add a File Upload form to let you upload files right from the Link dialog.
image_float (by Patabugen)
https://bitbucket.org/Patabugen/wymeditor-plugins/src
Float images with classes.
image_upload (by Patabugen)
https://bitbucket.org/Patabugen/wymeditor-plugins/src
Adds an Image Upload form to the Insert Image dialog.
Catch Paste
Force automatic “Paste From Word” usage so that all pasted content is properly cleaned.