Editor

insertContent#

Arguments:

  • params Object

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#

Arguments:

  • params Object

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#

Arguments:

  • data JSON Object

Sets JSON in the editor.

See more details on how to form blocks in JSON.


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#

Arguments:

  • caret String

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#

Arguments:

  • element Node Nodelist Dom

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#

Arguments:

  • element (optional) Node, Element, Dom

Saves the current selection.

this.app.editor.save(element);

restore#

Arguments:

  • element (optional) Node, Element, Dom

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

this.app.editor.restore(element);