- Redactor

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)
Internet Explorer 11
Microsoft Edge

Quick start

Redactor's installation has several steps. If you like to look the example and its code first, ok, here it is: the base example.

For those who like to do everything logically, take a seat and read further.

First, place redactor.css with styles between the <head></head> tags.

<head>
    <title>Redactor</title>
    <link rel="stylesheet" href="/your-folder/redactor.css" />
</head>

Second, place the HTML element in the body. This element will be replaced by the visual representation of the Redactor.

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

Third, place redactor.js before body close tag.

<body>
    <textarea id="content"></textarea>
    <script src="/your-folder/redactor.js"></script>
</body>

Finally, call Redactor.

<body>
    <textarea id="content"></textarea>
    <script src="/your-folder/redactor.js"></script>
    <script>
       $R('#content');
    </script>
</body>

Gathering everything.

<!DOCTYPE html>
<html>
<head>
    <title>Redactor</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/your-folder/redactor.css" />
</head>
<body>
    <textarea id="content"></textarea>
    <script src="/your-folder/redactor.js"></script>
    <script>
        $R('#content');
    </script>
</body>
</html>

Module import

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

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

Redactor can work was 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('#content', { ...opts... });

React

Redactor (3.4.4+) can work in React, just import the editor to do this.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// import Redactor
import './static/redactor.css';
import Redactor from './static/redactor.js';

// call
Redactor('#content');

To connect plugins, you need to specify the import of Redactor in the plugin file, like this:

import Redactor from './static/redactor';

After that you can run Redactor with the plugins:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// import Redactor
import './static/redactor.css';
import Redactor from './static/redactor.js';
import './static/alignment.js';

// call
Redactor('#content', {
    plugins: ['alignment']
});

Multiple editors

You can call Redactor for multiple HTML elements on the page. Just specify the class or another group selector when initializing.

// first element
<textarea class="content"></textarea>

// second element
<textarea class="content"></textarea>

// initialize both of them
$R('.content');

And here is the example.

Load via data attribute

Redactor can be called automatically by specifying the data attribute data-redactor for the HTML element. In this case, the editor will be launched on the window.load event without having to initialize manually.

<textarea data-redactor></textarea>

See the example.

Call with jQuery

Redactor does not require jQuery for work, but if you need it for some environment cases, Redactor supports calling as a jQuery plugin out of the box.

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

// JS
$('#content').redactor();

Initialize for the div layer

If you call Redactor for a div tag, the default CSS styles in this layer will remain the same as the styles for the entire page. In other words, when you call for a div layer, Redactor does not affect how the content looks.

/ HTML
<div id="content"></div>

// JS
$R('#content');

See the example.

However, if you want Redactor to apply its CSS styles for content, call it with the styles: true option.

// HTML
<div id="content"></div>

// JS
$R('#content', { styles: true });

Initialize as the inline editor

If Redactor is not calling for a div/textarea tag or calling with the option inline: true, then this HTML element will be edited as one line with predefined properties:

Enter key is disabled and will not work
Toolbar (and Air toolbar) will turn off
Source code will not showing
Redactor CSS styles for content will not apply
Autoparse link, images or video will not work
Pasting will always as plain text

These properties can not be changed through the options.

// HTML
<span id="content-1"></span>
<div id="content-2"></div>

// JS
$R('#content-1');
$R('#content-2', { inline: true });

Look at the example.

Get Started

Documentation

Initialization