ContentEdit plugin

Go back to Built-in plugins

ContentEdit plugin provides some common editing functionalities which are not supported by browser contenteditable DIV by default. These functionalities can be turned on/off separately.

Create plugin instance

ContentEdit is a built-in plugin of RoosterJs. When you create an editor with createEditor() API, this plugin is already included.

To manually create an instance of this plugin, you can use its constructor:

interface ContentEditFeatures {
    indentWhenTab: boolean;
    outdentWhenShiftTab: boolean;
    outdentWhenBackspaceOnEmptyFirstLine: boolean;
    outdentWhenEnterOnEmptyLine: boolean;
    mergeInNewLineWhenBackspaceOnFirstChar: boolean;
    unquoteWhenBackspaceOnEmptyFirstLine: boolean;
    unquoteWhenEnterOnEmptyLine: boolean;
    autoBullet: boolean;
    tabInTable: boolean;
}

constructor(private features?: ContentEditFeatures);

Parameters

The constructor of ContentEdit class takes one optional parameter, which determins what features do you want this plugin to provide. In RoosterJs 6.7.5, the following features are supported:

indentWhenTab

When press Tab in a list (bullet list, numbering list), indent current list item. Default value is true.

outdentWhenShiftTab

When press Shift+Tab in a list (bullet list, numbering list), outdent current list item. Default value is true.

outdentWhenBackspaceOnEmptyFirstLine

When press BaskSpace on empty line which is the first item of a list (bullet list, numbering list), outdent current list item. Default value is true.

outdentWhenEnterOnEmptyLine

When press Enter on empty line in a list (bullet list, numbering list), outdent current list item. Default value is true.

mergeInNewLineWhenBackspaceOnFirstChar

When press BaskSpace on first char in a list (bullet list, numbering list), make current item a new line of previous list item. Default value is false.

unquoteWhenBackspaceOnEmptyFirstLine

When press BaskSpace on empty line which is the first line of a blockquote, unquote current line. Default value is true.

unquoteWhenEnterOnEmptyLine

When press Enter on empty line in a blockquote, unquote current line. Default value is true.

autoBullet

When press space after an asterik/dash (*/-) or number (1.) in an empty line, turn current line into bullet/numbering list. Default value is true.

tabInTable (Added in 6.8.0)

When press TAB or SHIFT+TAB key in table cell, jump to next/previous table cell. Default value is true.

Overwrite default feature set

To overwrite one or some of the default feature settings, you can use getDefaultContentEditFeatures() function to get the default feature set then modify it. The code below will turn of "autoBullet" feature but keep all other features using default values:

let features = getDefaultContentEditFeatures();
features.autoBullet = false;
let contentEditPlugin = new ContentEdit(features);

Event

In RoosterJs 6.7.5, ContentEdit plugin will trigger ContentChangedEvent with source equal to 'Format' (ChangeSource.Format). This behavior may be changed in newer build.

More info

Package: roosterjs-editor-plugins

Support from: 6.5.0 (autoBullet feature requires 6.7.0)

Source code: ContentEdit.ts