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

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, 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.


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.


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