-
Notifications
You must be signed in to change notification settings - Fork 0
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
// 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)