Documentation
Editor
insertContent #
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 #
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 #
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 #
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 #
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.