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();

getEditor

Returns the DOM element of the editor.

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

build

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

this.app.editor.build();

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();

isEditor

Arguments

element

Node Nodelist Dom

Checks if the element is the editor.

var is = this.app.editor.isEditor(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.

RedactorX.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:

RedactorX('#entry', {
    plugins: ['myplugin']
});

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.