Create an editor using createEditor() API

Go back to Quick Start

The easiest way to create a new editor is to use createEditor() API.

createEditor function

function createEditor(contentDiv: HTMLDivElement, additionalPlugins?: EditorPlugin[], initialContent?: string): Editor;

This function will create a new roosterjs editor using the passed-in DIV element with most common options.

By default it will load 4 basic plugins:

1. ContentEdit

   This plugin will handle common edit operation which is not provided by web-browser. For example, when press Tab key in a list, with this plugin editor will indent current list item, while the default browser behavior is to focus to next element outside editor.

2. DefaultShortcut

   This plugin provides handlers to most common used shortcuts, such as Ctrl-B, Ctrl-I, Ctrl-U, Ctrl-., Ctrl-/, ...

3. HyperLink

   This plugin provides two functionalities:

   For all hyperlinks inside the editor content, handle Ctrl + Click event to open this link since hyperlink can't be directly opened in editing mode

   When provided a string callback, this plugin will show a tooltip on hyperlink when hovering to tell user information about this link

4. PasteManager

   This plugin handles paste event, retrieve pasted content and insert it into content. It supports pasting both HTML content and inline image.

Parameters

There is one mandatory parameter of this function:

contentDiv: The HTML DIV element which will become an Editor. You need to give this DIV element CSS styles to make it better fill with your page, roosterjs will just turn in into editable mode and handle user events.

There are two optional parameters of this function:

additonalPlugins:

Besides the 4 default plugins above, you can add more plugins using this parameter. For example, Watermark is a plugin provided by roosterjs but it is not added by default. You can add it with this parameter:

let contentDiv = document.getElementById("contentDiv") as HTMLDivElement;
let editor = createEditor(
    contentDiv,
    [ new Watermark("Please type here") ]
);

initialContent:

It is possible to set initial content to the editor before user is able to edit it. And of cause you can also set content using Editor.setContent() API any time after editor is created. The difference is, content set by initialContent parameter is not undoable, while after setting content using Editor.setContent(), user is still able to undo to the state before setContent() is called.

let contentDiv = document.getElementById("contentDiv") as HTMLDivElement;
let editor = createEditor(
    contentDiv,
    null,
    "<div>Welcome to <b>RoosterJs</b>!</div>"
);

If you need to change more options, change parameter of default plugins, or remove any default plugin, please see Create an editor using Editor class.