Set and retrieve content

Go back to How to use

Set HTML content

You are able to set initial HTML content of editor via createEditor API or directly create instance of Editor class. Once editor is created, you can still modify the HTML content by some methods of Editor class.

insertContent method

Editor.insertContent() method allow you to insert some HTML content to a specified position of editor:

const enum ContentPosition {
    Begin,
    End,
    SelectionStart,
}

interface InsertOption {
    position: ContentPosition;
    updateCursor: boolean;
    replaceSelection: boolean;
    insertOnNewLine: boolean;
}

public insertContent(content: string, option?: InsertOption);

The first parameter of insertContent() method is the HTML string to insert. You can insert any HTML string into editor and editor will not do any filtering of the content.

The second parameter if the insert option. By default it will use this combination of values:

• position: ContentPosition.SelectionStart
• updateCursor: true
• replaceSelection: true
• insertOnNewLine: false

insertNode method

Similarly, there is an insertNode() method to allow you insert an HTML DOM node. It has very similar signature with insertContent() method and the same default value of parameter:

public insertNode(node: Node, option?: InsertOption);

setContent method

To replace whole HTML content with a given HTML string, you can use Editor.setContent() method:

public setContent(content: string);

Once this method is called, all existing content will be replaced, and current cursor position/selection will be reset. And this method will trigger a ContentChanged event with source 'SetContent' and broadcast to all plugins, so that plugins know that whole content is changed, while insertNode() and insertContent() won't trigger such event.

When using insertContent() or setContent(), you need to take the responsibility to make sure the inserted HTML string is clean and safe.

• Insert/Set HTML with any javascript may cause the script to be executed. So it is better only insert/set HTML content composed by your own code.
• Insert/Set HTML with global CSS styles may cause CSS bleeding, which may impact HTML elements outside the editor. So it would be better only insert/set HTML content composed by your own code.
• To do a global CSS to inline CSS converting, you can use convertInlineCss() API from roosterjs-editor-dom package.

function convertInlineCss(
    sourceHtml: string,
    additionalStyleNodes?: HTMLStyleElement[]
): string;

Retrieve content

It is always the last action before we dispose editor that we need to retrieve the result HTML content from editor. To retrieve HTML content, Editor class provides some methods: Editor.getContent() and Editor.getTextContent.

Retrieve HTML content

public getContent(triggerExtractContentEvent: boolean = true): string;

By default, this method will return current innerHTML of the editor content DIV.

There is an optional parameter triggerExtractContentEvent and its default value is true. When set to true, editor will broadcast an ExtractContent event to all plugins. Plugins receive this event then they will scan the content to see if there is any temporary content added by plugin, then plugins need to remove those temporary content and return a clean HTML string. So that caller of this method can get clean HTML string without any temporary content.

Retrieve text content

To retrieve text content, you can use Editor.getTextContent() method:

public getTextContent(): string;

This will return the plain text content inside editor without any format information.