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.