Bootstrap Editor SDK
JavaScript SDK
Purchase logo
Get for Bootstrap
Purchase logo
Get for Foundation

Bootstrap Editor JavaScript API


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 like AMD, CommonJS, etc. and there implementations (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.


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 treating the specified element as editable content 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.
el parameter must have a link to container element (Bootstrap container or just div wrapping all rows).
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.
el parameter is link to an input. The value of the input must contain a list of rows or container wrapping them. Please use contentMode key inside parameters argument to specify which structure fo you have.
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.
Depending of does your html parameter contain container or just a list of rows, set contentMode option inside parameters appropriately.
preInit(params: Parameters)
Performs actions which are usually are done on the first Bootstrap Editor open on the current page load. In other words this method will include CKEditor script into the page and make some other optimization actions (in future this list will be expanded). If you do not run this function manually, it will be executed on any request to open Bootstrap Editor.

Passing parameters

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.