Initialization

This guide explains how to add RichText to a page. Follow these steps to get a ready-to-use editor:

1. Include the source files on a page.
2. Create a container for RichText.
3. Initialize RichText.

Include the source files

Add the RichText JavaScript and CSS files to your project. Download the package and unpack the contents into your project folder.

To create RichText, include two source files on your page:

• richtext.js
• richtext.css

Reference the files in your HTML. Adjust the relative paths to match your folder layout:

index.html

<script type="text/javascript" src="./codebase/richtext.js"></script>  
<link rel="stylesheet" href="./codebase/richtext.css">

Create a container

Add a container for RichText with an ID such as "root":

index.html

<div id="root"></div>

Initialize RichText

Initialize RichText with the richtext.Richtext constructor. The constructor takes two parameters:

• a container — a CSS selector or a DOM element
• a configuration object with the editor properties. See the full list of properties below

The example below initializes RichText in the #root container:

index.html

const editor = new richtext.Richtext("#root", {
    // configuration properties  
});

Configuration properties

Add configuration options as keys of the configuration object.

note

For the full list of configuration properties, see the Properties overview.

Destroy the RichText instance

Call the destructor() method to remove the RichText HTML and detach all related events:

const editor = new richtext.Richtext("#root", {
    // configuration properties
});

editor.destructor();

Example

The example below initializes RichText with the menubar enabled: