Documentation
Create a plugin
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:
(function($R)
{
$R.add('plugin', 'myplugin', {
// construct
init: function(app)
{
// define redactor app
this.app = app;
// your code
}
});
})(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">
<!-- redactor css -->
<link rel="stylesheet" href="/your-folder/redactor.css" />
</head>
<body>
<!-- element -->
<textarea id="content"></textarea>
<!-- redactor js -->
<script src="/your-folder/redactor.js"></script>
<!-- plugin js -->
<script src="/your-folder/plugins/myplugin.js"></script>
<!-- call -->
<script>
$R('#content', { plugins: ['myplugin'] });
</script>
</body>
</html>
You can link as many plugins as you like:
<script>
$R('#content', {
plugins: ['myplugin', 'anotherplugin']
});
</script>
Most likely, you wish to launch your plugin with Redactor simultaneously. Create the start method in your plugin, and this method will launch at the same time as Redactor:
(function($R)
{
$R.add('plugin', 'myplugin', {
init: function(app)
{
this.app = app;
},
start: function()
{
console.log('Plugin started');
}
});
})(Redactor);
It is time to create a method in the plugin and see how it interacts with Redactor API.
Let’s create build method and call it from start.
(function($R)
{
$R.add('plugin', 'myplugin', {
init: function(app)
{
this.app = app;
},
// public
start: function()
{
this._build();
},
// private
_build: function()
{
console.log('myplugin is building');
}
});
})(Redactor);
Now let’s say we are creating a button in the toolbar that will perform some action when pressed by a user.
(function($R)
{
$R.add('plugin', 'myplugin', {
init: function(app)
{
this.app = app;
// define toolbar service
this.toolbar = app.toolbar;
},
start: function()
{
// set up the button
var buttonData = {
title: 'My button',
api: 'plugin.myplugin.toggle'
};
// add the button to the toolbar
var $button = this.toolbar.addButton('my-button', buttonData);
},
toggle: function()
{
console.log('My button toggled!');
}
});
})(Redactor);
This way, a new button will be added to the toolbar and whenever a user clicks on this button, toggle method will be called.
Ok, give the translation to the button. To translate the plugin, you need the Lang service, define it in the constructor and add the language object to the plugin.
(function($R)
{
$R.add('plugin', 'myplugin', {
// set translations
translations: {
en: {
"my-button": "My button"
},
fi: {
"my-button": "Oma nappi"
}
},
init: function(app)
{
this.app = app;
this.toolbar = app.toolbar;
// define lang service
this.lang = app.lang;
},
start: function()
{
// set up the button with lang variable
var buttonData = {
title: this.lang.get('my-button'),
api: 'plugin.myplugin.toggle'
};
// add the button to the toolbar
var $button = this.toolbar.addButton('my-button', buttonData);
},
toggle: function()
{
console.log('My button toggled!');
}
});
})(Redactor);