Set & get content

This guide covers HTML content: how to load it into Redactor and how to read it back.

To work with the block JSON format (data option, getJson, block types), see Set & get JSON.

Set HTML on init#

Redactor reads the first document from one of these sources (in order of priority):

1. content option — HTML string
2. data option — JSON blocks (see the JSON guide)
3. Host element — inner HTML of a <div>, or value of a <textarea>

Textarea

Classic CMS pattern — HTML lives between the tags:

<textarea id="entry">
<h1>Title</h1>
<p>Paragraph text.</p>
</textarea>

const app = Redactor('#entry');

On save you can write back to the same textarea with getHtml() (see below).

Div with HTML inside

<div id="entry">
    <h1>Title</h1>
    <p>Paragraph text.</p>
</div>

const app = Redactor('#entry');

Empty host + content option

Useful when HTML comes from your backend or JavaScript:

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

const app = Redactor('#entry', {
    content: '<h1>Title</h1><p>Paragraph text.</p>'
});

Replace the whole document (API)#

After the editor is running, replace everything with setContent:

app.setContent('<h1>New title</h1><p>New body.</p>');

Optional caret after load:

app.setContent('<p>Focus me</p>', { caret: 'end' });

caret can be false (default), 'start', or 'end'.

To load JSON instead of HTML, use setJson or setContent with format: 'json' — see the JSON guide.

Clear or reset

app.clearContent(); // empty document, no default paragraph
app.setEmpty();     // empty + one default text block, caret at start

Insert HTML at the caret#

insertHtml adds markup at the current selection or at a configured position. It does not replace the whole document.

app.insertHtml('<p><strong>Inserted</strong> paragraph.</p>');

Common options:

app.insertHtml('<p>At the bottom.</p>', { position: 'bottom' });

Get HTML and text#

getHtml()

Clean HTML ready for storage or display. Runtime UI nodes are stripped; output passes through the output cleaner.

const html = app.getHtml();

getText()

Plain text from the editable area (no markup).

const text = app.getText();

getContent(format, options)

Generic export:

const html = app.getContent('html');
const htmlTidy = app.getContent('html', { tidy: true });
const json = app.getContent('json');
const nodes = app.getContent('nodes');
const blocks = app.getContent('blocks');

getRawHtml()

Editable innerHTML as-is — includes internal markup, no output cleaning. Useful for debugging.

const raw = app.getRawHtml();

Sync to an external field#

The output option mirrors editor HTML into another element (often a hidden <textarea> for form submit):

const app = Redactor('#entry', {
    output: '#result'
});

If the target is a <textarea>, Redactor updates value; otherwise innerHTML.

See Sync to output field.

Output hooks#

Before HTML or JSON is returned, Redactor emits:

• output:before:html — { html } — change html in the handler to post-process export
• output:before:json — { json } — change json for JSON export
• output:prepare:html — earlier HTML preparation step