Redactor / Documentation / Creating plugins
Creating plugins
Plugins are here to extend Redactor’s features and options. It’s very easy to build a plugin. We’ve developed a powerful API and straightforward development process to allow you to create a broad variety of different plugins with limitless possible functionality.
First, create plugin file and name it, let’s say, myplugin.js. will be your plugin’s name.
Now let’s build a base for your plugin. Put the following code inside this file:
$.Redactor.prototype.myplugin = function()
{
return {
myMethod: function()
{
// your code
}
};
};
This code allows you to link your plugin with Redactor and use plugin’s methods in Redactor.
Now, add a link to your plugin on a page, where you’re using Redactor.
<!DOCTYPE html>
<html>
<head>
<title>Plugins are friends, not food!</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/your-site-style.css" />
<link rel="stylesheet" href="redactor/redactor.css" />
<script type="text/javascript" src="lib/jquery-2.0.1.min.js"></script>
<script src="redactor/myplugin.js"></script>
<script src="redactor/redactor.js"></script>
<script type="text/javascript">
$(function()
{
$('#content').redactor({
plugins: ['myplugin']
});
});
</script>
</head>
<body>
<div id="page">
<textarea id="content" name="content"></textarea>
</div>
</body>
</html>
You can link as many plugins as you like:
<script type="text/javascript">
$(function()
{
$('#content').redactor({
plugins: ['myplugin', 'anotherplugin']
});
});
</script>
Most likely, you wish to launch your plugin with Redactor simultaneously. Create 'init' method in your plugin, and this method will launch at the same time as Redactor:
$.Redactor.prototype.myplugin = function()
{
return {
init: function()
{
console.log('Plugin started');
}
};
};
It is time to create a method in the plugin and see how it interacts with Redactor API. Let’s create ‘show’ method and call it from 'init'.
$.Redactor.prototype.myplugin = function()
{
return {
init: function()
{
this.myplugin.show();
},
show: function()
{
console.log('myplugin show');
}
};
};
Now let’s say we are creating a button in the toolbar that will perform some action when pressed by a user.
$.Redactor.prototype.myplugin = function()
{
return {
init: function()
{
var button = this.button.add('my-button', 'My Button');
this.button.addCallback(button, this.myplugin.show);
},
show: function()
{
console.log('myplugin show');
}
};
};
This way, a new button will be added to the toolbar and whenever a user clicks on this button, 'show' method will be called.