Create an editor using createEditor() API

Go back to How to use

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 3 basic plugins:

1. ContentEdit
2. HyperLink
3. Paste

For more information about these plugins, please see Built-in plugins.

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.

More info

Package: roosterjs

Support from: 6.0.0

Source code: createEditor.ts

Reference: https://microsoft.github.io/roosterjs/docs/modules/roosterjs.html#createeditor