Working with API

Overview #

Redactor provides external access to any methods of the application, services, modules, and plugins. But we recommend always creating plugins for any interactions with Redactor and using a message system between the modules to implement your planned functionality.

The Redactor system designed with low modules connectivity, for the reliability of work and making changes. Therefore, it is better to create complete and change-independent plugins than to use external access to the API, which binds you to specific modules.

Plugins have all the tools for independent and straightforward work - these are services and a message system that broadcast from the application and modules. Read more about creating plugins and how the message system works in Redactor:

  • How to create a plugin
  • Working with messages

Access through the application object #

Redactor returns the application object when it is initialized:

// element
<textarea id="content"></textarea>
// init redactor
var app = $R('#content');

If there are multiple Redactors on the page, then the application object can be retrieved by ID selector:

// elements
<textarea class="content" id="my-content-1"></textarea>
<textarea class="content" id="my-content-2"></textarea>

// init redactors
$R('.content');

// get a specific Redactor App on the page
var app = $R('#my-content-1');

The application object contains all methods, services, modules and plugins, so you can call them directly via the object, like this:

// call app method
app.stop();

// call service method
app.selection.get();

// call module method
app.module.link.insert(data);

// call plugin method
app.plugin.myplugin.parse(data);

API methods can take arguments and return values if this is provided by the method design.

// set up arguments
app.insertion.insertNode(node);

// get value
var html = app.selection.getHtml();

Access through the element selector #

The second choice to get access Redactor API is to call to the element selector. For example, the following code shows how to turn off Redactor when you click the button:

// button
<button onclick="$R('#content', 'stop');">Stop</button>

// element
<textarea id="content"></textarea>

// init redactor
$R('#content');

This works for multiple Redactors on the page, just specify the multiple selector:

<button onclick="$R('.my-content-class', 'stop');">Stop</button>

Using the selector, you can call the methods of services, modules and plugins:

// call service method
$R('#content', 'selection.get');

// call module method
$R('#content', 'module.link.insert', data);

// call plugin method
$R('#content', 'plugin.myplugin.insert', data);

In this case, API methods can also take arguments and return values, if this is provided by the method design.

// set up arguments
$R('#content', 'insertion.insertNode', node);

// get value
var html = $R('#content', 'selection.getHtml');