Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including r-t-e with all npm packages installed. Try it out:

var rTE = require("r-t-e")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

r-t-e v1.3.1

A rich text editor that is designed to accept limited set of inline HTML tags only.

Rich Text Editor

A rich text editor that is designed to accept limited set of inline HTML tags only.

This rich text editor works best on any form that are accessible in the public such as comment form in a blog, chat form in a social media and question or answer form in a forum.

Rich Text Editor



<!DOCTYPE html>
<html dir="ltr">
    <meta charset="utf-8">
    <link href="rich-text-editor.min.css" rel="stylesheet">
    <script src="rich-text-editor.min.js"></script>
    var editor = new RTE(document.querySelector('textarea'));


var editor = new RTE(source, config);
sourceThe text area element.
configThe configuration data. See below!
config = {
    classes: ['rich-text-editor'],
    tools: ['b', 'i', 'u', 'a', 'x'], // visible tool(s)
    tags: [ // allowed HTML tag(s)
    attributes: [ // allowed HTML attribute(s)
    text: {
        b: ['Bold', 'B', '⌘+B'],
        i: ['Italic', 'I', '⌘+I'],
        u: ['Underline', 'U', '⌘+U'],
        a: ['Link', 'A', '⌘+L'],
        x: ['Source', '&#x22ef;', '⌘+⇧+X']
    tidy: true, // tidy HTML output?
    enter: true, // set to `false` to automatically submit the closest form on enter key press
    x: function(e, node) {}, // on mode change (view/source); set to `false` to disable the source view
    update: function(e, node) {} // on view/source update

Note: All block tags are not allowed except <p> tags without attributes.



editor.focus(0); // focus start
editor.focus(1); // focus end
editor.focus(true); // select all


editor.lot; // selection storage [source, view]
editor.config; // editor configuration
editor.container; // editor container
editor.view; // editor view
editor.source; // editor source; // editor tools
editor.dialog; // editor dialog

Set Value

editor.set('Lorem ipsum dolor sit amet.');

Get Value


Save Selection

var s = editor.s();

Restore Selection


Get Selection

editor.v(); // as plain text
editor.v(true); // as HTML
editor.v(true, false); // as original selected HTML value in `editor.view`
editor.v(true, true, false); // as HTML and remove the wrapping `<p>` tag

Wrap Selection with HTML Element

editor.w('strong'); // toggle wrap/unwrap `<strong>` tag
editor.w('strong', 1); // force wrap `<strong>` tag
editor.w('strong', 0); // force unwrap `<strong>` tag

Wrap selection with HTML element and add attributes on that element:

var e = editor.w('a');
e.href = '';
e.rel = 'nofollow'; = '_blank';

Collapse Selection

editor.c(0); // collapse to the start of the selection
editor.c(1); // collapse to the end of the selection

Insert HTML at Caret/Selection

editor.i('<img arc="file.png">', true); // select the inserted HTML
editor.i('<img arc="file.png">', 0); // put caret after the inserted HTML (insert before caret)
editor.i('<img arc="file.png">', 1); // put caret before the inserted HTML (insert after caret)

Get Selected HTML Node

editor.e(); // return list of nodes in the current selection
editor.e('a'); // check if the selected text is an `<a>` tag

Sanitize HTML

editor.f('foo bar <b>baz</b> <span>qux</span>');

Get Selection as Node


Create Selection Range

Create selection range from A node to B node.

var p = editor.view.querySelectorAll('p');
editor.m([p[0], p.pop()]);

Tool State

if ('strong')) {
    // caret was selecting a `<strong>` tag or is placed in a `<strong>` tag



// id: the tool ID
// text: array of [title, content, description]
// fn: the function that will be triggered on click
// i: tool index from the current tool list (if not defined, tool will be put at the end of the list)
// editor.t(id, text, fn, i);

Create a bold button:

editor.t('b', ['Bold', '<b>B</b>', 'Ctrl+B'], function(e, node) { … });



// fn(e, input);
editor.d(placeholder, value, fn);


editor.d.v(true); // save previous selection


editor.d.x(true); // restore previous selection
editor.d.x(true, true); // ignore the error, exit anyway


Check whether these elements are visible at the time:; // the rich text editor view; // the HTML source view; // the dialog view; // check if cursor is active in the view; // check if cursor is not active in the view; // check if there was an error
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free