Quick start - Guides - Documentation

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

Note

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.

Installation#

Installing Redactor is very simple. Connect the CSS file in the <head> and the JS file before the closing </body> tag.

Here is a complete example of how a page with Redactor may look:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Redactor</title>
    <link rel="stylesheet" href="/assets/redactor/redactor.min.css">
</head>
<body>
    <textarea id="entry">
        <p>Hello, Redactor!</p>
    </textarea>

    <script src="/assets/redactor/redactor.min.js"></script>
    <script>
        const app = Redactor('#entry');
    </script>
</body>
</html>

Adjust the paths to match where you store the files on your site.

The call can run at the end of <body>, or after DOMContentLoaded if the script is in <head>:

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

Redactor() returns an editor instance (app). Use it for getContent(), setContent(), events, and other API methods.

Requirements#

Redactor needs a modern browser with full JavaScript and HTML5 support. It is tested in recent versions of Chrome, Firefox, Safari, and Edge.

Textarea or div#

Redactor replaces a textarea or a div on the page.

Textarea — put initial HTML between the tags (classic CMS pattern):

<textarea id="entry">
    <p>Hello, Redactor!</p>
</textarea>

Div — put HTML inside the element:

<div id="entry">
    <p>Hello, Redactor!</p>
</div>

Empty host + content option — useful when HTML comes from your backend or JS:

<div id="entry"></div>

Redactor('#entry', {
    content: '<p>Hello, Redactor!</p>'
});

Empty host + data option — when you already have the document as a JSON array of blocks (Redactor’s native format):

Redactor('#entry', {
    data: [
        { type: 'heading', data: { level: 2, content: 'Title' } },
        { type: 'text', data: { content: '<p>Paragraph from JSON.</p>' } }
    ]
});

See Set & get content for HTML in and out, and Set & get JSON for the full block format.

ES modules#

In a bundler or native module setup, import the build and CSS:

import Redactor from './redactor.esm.min.js';
import './redactor.css';

const app = Redactor('#entry', {
    content: '<p>Hello, Redactor!</p>'
});

Plugins are enabled by key after you load the plugin script (see Load plugins below).

React, Vue, Next.js, Angular#

Redactor works in any environment. Mount it on a DOM node in your framework’s lifecycle and call destroy() on unmount.

Start with options#

Pass a settings object as the second argument.

const app = Redactor('#entry', {
    content: '<p>Start here</p>',
    source: false,
    placeholder: 'Write something…',
    image: {
        upload: '/upload/image'
    }
});

Global defaults for several editors on one page:

Redactor.settings = {
    placeholder: 'Write here…'
};

Redactor('#notes');
Redactor('#summary', { source: false });

Load plugins#

Load the plugin script after redactor.js. The plugin registers itself with Redactor.addPlugin.

<script src="/assets/redactor/redactor.min.js"></script>
<script src="/assets/redactor/plugins/counter/counter.min.js"></script>
<script>
    Redactor('#entry', {
        plugins: ['counter']
    });
</script>

Several plugins:

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

Focus on start#

By default the editor does not focus when it loads. Enable focus with the focus option:

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

true or 'start' — caret at the beginning of the content
'end' — caret at the end
false — no focus (default)