Quickstart

Requirements #

Redactor requires a modern browser with full Javascript and HTML5 support. Redactor 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 is not a desktop app. This is a web content creation application that should be installed on your website.

Redactor is written in vanilla Javascript and does not require any third-party frameworks or components.

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

Installing Redactor 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 may look.

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

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

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

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

Here is a live example of the start of Redactor.

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() {
    Redactor('#entry');
});

React, Vue, etc #

Redactor can be used with any framework because it is written in pure Javascript and has no dependencies. Therefore, you can use Redactor as a third-party library or as a component in any of your environments. Here are examples of solutions for popular frameworks and environments:

Module import #

import '../dist/redactor.js';

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

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

import Redactor from '../dist/redactor.usm.min.js';

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

Fast start #

Redactor replaces a textarea or div 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>
Redactor('#entry');
</script>

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

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

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

Here is a live example of the start of Redactor.

Start with settings #

Settings are set to Redactor 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:

Redactor('#entry', {
    source: false,
    focus: true,
    image: {
        upload: '/path-to-image-upload/'
    }
});

See more about Settings.

Load with plugins #

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

To call Redactor 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:

Redactor('#entry', {
    plugins: ['imageresize']
});

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

Redactor('#entry', {
    plugins: ['imageresize', 'emoji']
});

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

See all the 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:


Redactor('#entry', {
    focus: true // or use 'end' to set focus to the end of content
});

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