RTE — Rich Text Editor

Initialization

RTE.init(selector, options)

Parameter	Type	Description
`selector`	String \| Element	CSS selector string (e.g. `'#editor'`) or a DOM element
`options`	Object	Optional configuration object
`options.placeholder`	String	Placeholder text when editor is empty
`options.height`	String	Minimum height CSS value (e.g. `'400px'`)

Returns: An editor instance object with the methods and properties listed below, or null if the target element is not found.

Methods Overview

Method	Returns	Description
`getHTML()`	String	Get the editor's inner HTML content
`setHTML(html)`	void	Set the editor's HTML content
`getText()`	String	Get plain text content
`getFullHTML()`	String	Get a complete standalone HTML document
`getJSON()`	Object	Get content as a structured JSON object
`saveHTML(filename)`	void	Trigger a file download of the HTML document
`saveText(filename)`	void	Trigger a file download of plain text
`copyHTML()`	Promise	Copy rich HTML to clipboard
`copyText()`	Promise	Copy plain text to clipboard
`email(to, subject)`	void	Open email client with content
`print()`	void	Open print preview
`focus()`	void	Focus the editor
`destroy()`	void	Remove the editor from the DOM

Content Methods

`editor.getHTML()`

Returns the inner HTML of the editor content area.

const html = editor.getHTML();
// "<p><strong>Hello</strong> world</p>"

`editor.setHTML(html)`

Sets the editor content. Replaces all existing content and updates the word/char counts.

editor.setHTML('<h1>Welcome</h1><p>Start editing...</p>');

`editor.getText()`

Returns the plain text content of the editor (no HTML tags).

const text = editor.getText();
// "Hello world"

`editor.getFullHTML()`

Returns a complete, standalone HTML document with embedded styles. The output can be saved as a .html file and opened in any browser with full formatting preserved.

const doc = editor.getFullHTML();
// "<!DOCTYPE html><html>...<body>...content...</body></html>"

`editor.getJSON()`

Returns a structured object with content and metadata. Ideal for sending to APIs or storing in databases.

const data = editor.getJSON();
// {
//   html: "<p>Hello</p>",
//   text: "Hello",
//   wordCount: 1,
//   charCount: 5,
//   createdAt: "2026-02-16T12:00:00.000Z"
// }

Export Methods

`editor.saveHTML(filename?)`

Triggers a browser download of the editor content as a standalone HTML file.

editor.saveHTML();                  // downloads "document.html"
editor.saveHTML('my-article.html'); // custom filename

`editor.saveText(filename?)`

Triggers a browser download of the plain text content.

editor.saveText();                 // downloads "document.txt"
editor.saveText('notes.txt');      // custom filename

`editor.print()`

Opens the content in a new window with a styled print preview. Users can print or use "Save as PDF".

editor.print();

Clipboard Methods

`editor.copyHTML()`

Copies rich HTML to the clipboard. When pasted into Gmail, Google Docs, Word, etc., formatting is preserved. Returns a Promise.

await editor.copyHTML();
alert('Copied! Paste into your email.');

`editor.copyText()`

Copies plain text to the clipboard. Returns a Promise.

await editor.copyText();

Action Methods

`editor.email(to?, subject?)`

Opens the user's default email client with the editor content in the email body.

editor.email();                              // blank recipient
editor.email('team@example.com', 'Meeting Notes'); // pre-filled

`editor.focus()`

Sets focus to the editor content area.

editor.focus();

`editor.destroy()`

Completely removes the editor from the DOM.

editor.destroy();

Properties

Property	Type	Description
`editor.element`	HTMLElement	The contenteditable `div` (editor area)
`editor.wrapper`	HTMLElement	The outer `.rte-wrap` container
`editor.onChange`	Function \| null	Callback fired on every content change (see Events)

Events

`editor.onChange`

Assign a function to receive live updates on every content change. The callback receives an object with:

Field	Type	Description
`html`	String	Current HTML content
`text`	String	Current plain text
`words`	Number	Word count
`chars`	Number	Character count

editor.onChange = (data) => {
  console.log(`${data.words} words, ${data.chars} characters`);
  document.getElementById('preview').innerHTML = data.html;

  // Auto-save with debounce
  clearTimeout(window._saveTimer);
  window._saveTimer = setTimeout(() => {
    fetch('/api/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html: data.html })
    });
  }, 1000);
};

You can also listen for native DOM events on editor.element:

editor.element.addEventListener('focus', () => console.log('Editor focused'));
editor.element.addEventListener('blur', () => console.log('Editor blurred'));

Return Formats

getHTML()

Returns the raw inner HTML of the editor. This is the content between the editor's root element, including all formatting tags.

"<h2>Title</h2><p>Some <strong>bold</strong> text with <a href=\"...\">a link</a>.</p>"

getFullHTML()

Returns a complete HTML5 document with UTF-8 meta tag, viewport meta, and embedded CSS that styles headings, tables, blockquotes, code blocks, images, and more. Ready to save as a file or send as an email body.

getJSON()

{
  "html": "<p>Hello world</p>",
  "text": "Hello world",
  "wordCount": 2,
  "charCount": 11,
  "createdAt": "2026-02-16T15:30:00.000Z"
}

Full Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Editor</title>
</head>
<body>
  <div id="editor"></div>
  <button id="save">Save</button>
  <button id="email">Email</button>

  <script src="rte.js"></script>
  <script>
    const editor = RTE.init('#editor', {
      placeholder: 'Write your article...',
      height: '400px'
    });

    // Live word count
    editor.onChange = (data) => {
      document.title = data.words + ' words';
    };

    // Save button
    document.getElementById('save').addEventListener('click', () => {
      editor.saveHTML('my-article.html');
    });

    // Email button
    document.getElementById('email').addEventListener('click', () => {
      editor.email('editor@example.com', 'New Article');
    });
  </script>
</body>
</html>

API Reference