Editor

insertContent #

Inserts content to the editor.

this.app.editor.insertContent({ html: '<p>Hello world</p>' });

By default, the cursor moves to the end of the inserted html after the content is inserted. Here is how to place the cursor at the beginning:

this.app.editor.insertContent({
    html: '<p>Hello world</p>',
    caret: 'start'
});

By default, content is inserted where the cursor is. Here is how to insert html code at the beginning or end of the editor.

// insert content at the beginning of editor
this.app.editor.insertContent({
    html: '<p>Hello world</p>',
    position: 'top'
});

// insert content at the end of editor
this.app.editor.insertContent({
    html: '<p>Hello world</p>',
    position: 'bottom'
});

setEmpty #

Sets the editor empty.

this.app.editor.setEmpty();

setContent #

Sets content in the editor, replacing the current one.

this.app.editor.setContent({ html: '<p>Hello world</p>' });

By default, the cursor moves to the end of the inserted html after the content is inserted. Here is how to place the cursor at the beginning:

this.app.editor.setContent({
    html: '<p>Hello world</p>',
    caret: 'start'
});

setJson #

Sets JSON in the editor.

let data = {
    "version": "1.0.0",
    "time" : 1650860257872,
    "blocks": [
        {
            "type": "heading",
            "content": "...",
            "level": 1
        },
        {
            "type": "text",
            "content": "..."
        },
        {
            "type": "image",
            "src": "/path-to-image.jpg",
            "alt": "Alt text",
            "caption": "..."
        },
        {
            "type": "heading",
            "content": "...",
            "level": 2
        },
        {
            "type": "text",
            "content": "..."
        }
    ]
};

this.app.editor.setJSON(data);

setFocus #

Sets focus to the editor:

this.app.editor.setFocus('start');
this.app.editor.setFocus('end');

setBlur #

Removes the focus from the editor

this.app.editor.setBlur();

getContent #

Returns content from the editor.

let html = this.app.editor.getContent();

getJson #

Returns content as JSON from the editor.

let data = this.app.editor.getJson();

getEmail #

Returns content as HTML email if you have Email plugin

let data = this.app.editor.getEmail();

getEditor #

Returns the DOM element of the editor.

let $editor = this.app.editor.getEditor();

build #

Rebuilds blocks and editor events, for example, after adding a new block manually.

this.app.editor.build();

hasFocus #

Checks if the editor has focus.

let has = this.app.editor.hasFocus();

isSelectAll #

Checks if all blocks in the editor selected.

let is = this.app.editor.isSelectAll();

isEditor #

Checks if the element is the editor.

let is = this.app.editor.isEditor(element);

isEmpty #

Checks if the editor empty.

let is = this.app.editor.isEmpty();

save #

Saves the current selection.

this.app.editor.save(element);

restore #

Restores the selection if it was saved before by the save method.

this.app.editor.restore(element);