- Redactor X

Requirements

Redactor X requires a modern browser with full Javascript and HTML5 support. Redactor X has been tested in and fully supports following browsers:

Latest Chrome (desktop and mobile)
Latest Firefox (desktop only)
Latest Safari (desktop and mobile)
Latest Opera (webkit)
Microsoft Edge

Installation

Redactor X is not a desktop app. This is a web content creation application that should be installed on your website.

So, first, you need to purchase Redactor X and download it from our site, then you can proceed with the installation.

Installing Redactor X is very simple. You need to connect the CSS file editor between the head tag and the JS file before the closed body tag.

Here is a complete code example of how a page with a connected Redactor X may look.

<!DOCTYPE html>
<html>
<head>
    <title>Redactor X</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-dist-path/redactorx.min.css" />
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

    <!-- js -->
    <script src="/your-dist-path/redactorx.min.js"></script>

    <!-- call -->
    <script>
    RedactorX('#entry');
    </script>
</body>
</html>

Here is a live example of the start of Redactor X.

Make sure that you specify the correct paths to the editor files, depending on the directory in which they are located.

In the example above, you can see that the JS file of the editor is connected to the closed tag body, but of course you can include the JS file in thehead tag, just like the CSS file of the editor. In this case, call the Editor after the DOM content loaded, for example, like this:

document.addEventListener('DOMContentLoaded', function() {
    RedactorX('#entry');
});

Module import

import '../dist/redactorx.js';

RedactorX('#entry', { ...opts... });

Redactor X can work was ES6 module, just import it and use RedactorX object in your app. Or use usm version for import.

import RedactorX from '../dist/redactorx.usm.min.js';

RedactorX('#entry', { ...opts... });

Quick start

Redactor X replaces a textarea element on the page. So when calling the editor, you need to specify the selector of this element. This can be an ID or class.

For example, you have the following element on the page:

<textarea id="entry">
    <p>Content</p>
</textarea>

The call of the editor for it will be like this:

<script>
RedactorX('#entry');
</script>

Now the textarea element will be replaced with Redactor X and you can edit the content.

Make sure that the call to Redactor X is after the JS file of the editor, or use the call after DOM content loaded, for example, like this:

document.addEventListener('DOMContentLoaded', function() {
    RedactorX('#entry');
});

Here is a live example of the start of Redactor X.

Start with settings

Settings are set to Redactor X as an object when the editor launched. You can see the entire list of settings and a description of each of them.

Below you can see an example of calling the editor with the settings:

RedactorX('#entry', {
    source: false,
    editor: {
        focus: true
    }
});

The first setting source turns off the source code view, and the second indicates that the focus should be placed on the editor when it starts up.

Here is a live example of launching the editor with settings.

Load with plugins

Plugins extend the functions of Redactor X. You can create your own plugin or use the ones that we made.

To call Redactor X with plugins, first you need to install a plugin on the page, according to the instructions of the plugin. Usually, it is enough just to connect the JS file of the plugin after the JS file of the editor.

Now you can call the editor with the plugin, specifying in the settings which plugin should be launched:

RedactorX('#entry', {
    plugins: ['inlineformat']
});

Here is an example of setting, if you need to run several plugins:

RedactorX('#entry', {
    plugins: ['inlineformat', 'style']
});

Just specify in the array, those plugins that are needed.

Here is a live example of calling the editor with plugins.

Set focus on the start

By default, the editor does not focus on content at start. This can be changed by specifying the editor.focus setting, like this:

RedactorX('#entry', {
    editor: {
        focus: true
    }
});

Now the focus will be set to the first block of content and you can immediately start editing.

Docs

Documentation