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.
Usage
Demo
Options
var editor = new RTE(source, config);
| Variable | Description |
|---|---|
source |
The text area element. |
config |
The configuration data. See below! |
config = {classes: ['rich-text-editor'],tools: ['b', 'i', 'u', 'a', 'x'], // visible tool(s)tags: [ // allowed HTML tag(s)'a','abbr','b','br','code','dfn','del','em','i','ins','kbd','mark','p','span','strong','u','var'],attributes: [ // allowed HTML attribute(s)'class','data-[\\w-]+?','href','id','rel','style','target','title'],text: {b: ['Bold', 'B', '⌘+B'],i: ['Italic', 'I', '⌘+I'],u: ['Underline', 'U', '⌘+U'],a: ['Link', 'A', '⌘+L'],x: ['Source', '⋯', '⌘+⇧+X']},tidy: true, // tidy HTML output?enter: true, // set to `false` to automatically submit the closest form on enter key pressx: function(e, node) {}, // on mode change (view/source); set to `false` to disable the source viewupdate: function(e, node) {} // on view/source update};
Note: All block tags are not allowed except
<p>tags without attributes.
Methods
Interactions
editor.focus();editor.focus(0); // focus starteditor.focus(1); // focus endeditor.focus(true); // select alleditor.blur();editor.enable();editor.disable();editor.create();editor.destroy();
Properties
editor.lot; // selection storage [source, view]editor.config; // editor configurationeditor.container; // editor containereditor.view; // editor vieweditor.source; // editor sourceeditor.tools; // editor toolseditor.dialog; // editor dialog
Set Value
editor.set('Lorem ipsum dolor sit amet.');
Get Value
console.log(editor.get());
Save Selection
var s = editor.s();
Restore Selection
editor.r(s);
Get Selection
editor.v(); // as plain texteditor.v(true); // as HTMLeditor.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>` tageditor.w('strong', 1); // force wrap `<strong>` tageditor.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 = 'http://example.com';e.rel = 'nofollow';e.target = '_blank';
Collapse Selection
editor.c(0); // collapse to the start of the selectioneditor.c(1); // collapse to the end of the selection
Insert HTML at Caret/Selection
editor.i('<img arc="file.png">', true); // select the inserted HTMLeditor.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 selectioneditor.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
console.log(editor.n());
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 (editor.is.e('strong')) {// caret was selecting a `<strong>` tag or is placed in a `<strong>` tag}
Tool
Create
// 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) { … });
Dialog
Create
// fn(e, input);editor.d(placeholder, value, fn);
Show
editor.d.v();
editor.d.v(true); // save previous selection
Hide
editor.d.x();
editor.d.x(true); // restore previous selection
editor.d.x(true, true); // ignore the error, exit anyway
State
Check whether these elements are visible at the time:
editor.is.view; // the rich text editor vieweditor.is.source; // the HTML source vieweditor.is.dialog; // the dialog view
editor.is.focus; // check if cursor is active in the vieweditor.is.blur; // check if cursor is not active in the vieweditor.is.error; // check if there was an error