Bootstrap Editor
for JS, CKEditor, TinyMCE
Bootstrap Editor logo
Get Bootstrap Editor inside
33 in 1
Bootstrap Full Bundle
$99

Bootstrap Editor JavaScript API

Installing

To install Bootstrap Editor, load its JS file in your application. You can do this in many ways available in JavaScript: from inserting a link to the script in the body of the document, to gluing it with your own file (for applications with a monolith output JS file).
You can also envelope the code of Bootstrap Editor to any module loader, for instance, RequireJS, and call it using the standard means of the library.
All required CSS styles are loaded by the editor automatically.

After that, you can interact with the editor via the window.BE2 global object.

Configuration

We recommend creating a key-value object to store the settings. Further, you can pass this object to all API functions called by Bootstrap Editor.

If you need, you can pass different parameters to different instances of Bootstrap Editor.

Configuration object example:

var parameters = {
    key1: value1,
    key2: value2,
    ...
}

To fill this object, take a look at the complete list of parameters available for use.

Usage

Here is the list of methods of the BE2 object that you can call to invoke Bootstrap Editor or attach it to some element.

openByElement(el: HTMLElement, params: Parameters)
Opens Bootstrap Editor taking as editable content the specified element and its nested DOM-tree. It is assumed that this element is a row or container Bootstrap element, but this is not necessary. This can be an empty div or an element with some content inside not yet formatted as Bootstrap content or having some elements not enveloped to row. Bootstrap Editor allows any format of input data and produces proper Bootstrap layout on the output.
This method saves data back to the specified element directly after the user clicks the "Save" button. From now on, the Parameters type is the structure described in the configuration section.
openByInput(el: HTMLInputElement|HTMLTextAreaElement, params: Parameters)
Opens Bootstrap Editor using the value of an input or textarea element as input data. After saving, updates the value property of the specified element.
openByHTML(html: string, params: Parameters)
Opens Bootstrap Editor by the explicitly specified HTML code passed as a string. This method offers high flexibility in embedding to any application, but you need to handle the save event manually, by specifying the onSave key in the Parameters structure.