Redactor requires a modern browser with full Javascript and HTML5 support. Redactor has been tested in and fully supports following browsers:
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>
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... });
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']
});
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.
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.
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();
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 });
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:
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.