JavaScript API Reference

Global: ReadyEditor

The ReadyEditor object is the main entry point. It is available globally after the loader initializes.

ReadyEditor.init(options)

Initializes editors on all elements matching selector.

Options:

Example:

ReadyEditor.init({
  selector: '.my-editor',
  apiKey: 'YOUR_API_KEY',
  height: 300,
  onChange: function(instance) {
    console.log('Changed:', instance.getContent());
  }
});

ReadyEditor.attachTextareas(options)

Attaches editors to <textarea> elements for HTML form integration. The bridge hides each textarea, inserts an editor <div> next to it, and syncs content back on form submit.

Requires the textarea bridge script. attachTextareas is defined in readyeditor.textarea.bridge.min.js, which is not loaded automatically by the loader. Add it as a separate <script> tag before calling this method.

<script src="https://cdn.readyeditor.io/releases/<version>/js/readyeditor.textarea.bridge.min.js"></script>

Options:

Example:

ReadyEditor.attachTextareas({
  selector: 'textarea.js-editor',
  editorOptions: {
    apiKey: 'YOUR_API_KEY',
    height: 250
  }
});

Manual sync — if you need to force-update textarea values from JS (e.g. before an AJAX submit):

ReadyEditor.syncAllTextareas();

ReadyEditor.getInstance(query?)

Returns an EditorInstance.

var instance = ReadyEditor.getInstance('.my-editor');

ReadyEditor.destroy(query?)

Destroys one or all editor instances and cleans up event listeners and DOM additions.

ReadyEditor.destroy();            // destroy all
ReadyEditor.destroy('.my-editor'); // destroy one

EditorInstance

Each initialized element gets an EditorInstance object.

Properties

getContent()

Returns the current HTML content as a string.

var html = instance.getContent();

setContent(html)

Sets the editor content. Runs the built-in sanitizer unless disabled.

instance.setContent('<p>Hello, World!</p>');

focus()

Focuses the editor.

instance.focus();

execCommand(command, value?)

Executes a document.execCommand on the current selection. Returns boolean.

instance.focus();
instance.execCommand('bold');
instance.execCommand('formatBlock', '<h2>');

Common commands: bold, italic, underline, strikeThrough, formatBlock, insertUnorderedList, insertOrderedList, createLink, undo, redo, removeFormat.

insertHTML(html)

Inserts HTML at the current caret position reliably:

• Ensures the caret is inside the editor element
• Tries execCommand('insertHTML')
• Falls back to Range insertion if the browser blocks it

Prefer this over calling execCommand('insertHTML') directly.

insertText(text)

Inserts plain text at the caret position (with the same reliability fallbacks as insertHTML).

destroy()

Destroys this instance and removes all event listeners and DOM additions.

instance.destroy();

DOM attributes set by the editor

When initialized, the editor element receives:

Events

The core listens for these DOM events on the editor element automatically:

• input — fires the onChange callback
• blur — fires the onChange callback

You can also attach your own listeners directly to instance.element:

instance.element.addEventListener('focus', function() {
  console.log('Editor focused');
});

Console logging

All ReadyEditor messages are prefixed with [ReadyEditor] in the browser console. Errors use console.error, warnings use console.warn.