Initialization

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

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>

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();

Please, see the example.

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.