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'
});

setFocus

Arguments

caret

String

Sets focus to the editor:

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

getContent

Returns content from the editor.

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

getLayout

Returns the DOM element of the editor layer. This layer has editable content.

var $layout = this.app.editor.getLayout();

getHead

Returns the DOM of frame head.

var $head = this.app.editor.getHead();

getBody

Returns the DOM of frame body.

var $body = this.app.editor.getBody();

getDoc

Returns the DOM of frame document.

var $doc = this.app.editor.getDoc();

getWin

Returns the DOM of frame window.

var $win = this.app.editor.getWin();

build

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

this.app.editor.build();

adjustHeight

Adjusts the height of the frame to the height of the content. It is useful to call manually if you insert dynamic content.

this.app.editor.adjustHeight();

isFocus

Checks if the editor has focus.

var is = this.app.editor.isFocus();

isAllSelected

Checks if all blocks in the editor selected.

var is = this.app.editor.isAllSelected();

isLayout

Arguments

element

Node Nodelist Dom

Checks if the element is the editor layout.

var is = this.app.editor.isLayout(element);

isEmpty

Checks if the editor empty.

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

addButton

Arguments

name	String
button	Object

Adds a button to the default state of toolbar when no one block is selected.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.editor.addButton('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(args) {
        // do something
    }
});

In this example, Font Awesome is used for the button icon. You can add your own HTML and SVG icon.

Now call the editor with the plugin created:

ArticleEditor('#entry', {
    plugins: ['myplugin'],
    css: '/your-article-dist-path/'
});

The button should appear on the toolbar when no block is selected and when it pressed, will call the plugin's toggle method.

See more about the parameters of the buttons.