Bootstrap Editor JavaScript library

This programmer-friendly version of Bootstrap Editor is ideal to any integrations of the plugin with your own product or web application.

You can evoke Bootstrap Editor from your own code via the public API to alter the specified context, and then receive the result of editing from your code, or let Bootstrap Editor refresh the content on the page.

Note. If you want to install Bootstrap Editor in a specific CMS that supports CKEditor or TinyMCE, you don't need to integrate the JS-version. You should take a look at the Bootstrap Editor verson that runs as a plugin to CKEditor and TinyMCE.

Sample usage

Editing the DOM-tree

The below code runs Bootstrap Editor to edit the content of the page enclosed in the tag with id="content".

If the "Save" button is clicked in the editor, the original DOM-structure is updated.

The framework: "b3" flag is only specified as an example of passing settings to Bootstrap Editor. Bootstrap 3 is already a default framework.

JavaScript:
var elBtn = document.getElementById("btn");
elBtn.addEventListener("click", function() {
    var elContent = document.getElementById("content");
    BE2.openByElement(elContent, {
        framework: "b3"
    });
});
HTML:
<div id="content" class="container">
    <div class="row">
        <div class="col-md-4">
            Left column
        </div>
        <div class="col-md-6">
            Right column
        </div>
    </div>
</div>

<button id="btn">Edit</button>

Editing input or textarea content

Executing this code does the following: Bootstrap Editor runs and takes the contents of the <textarea> element as the content of the editor.

After saving the content in the editor, it will be saved as a new value of the input field.

The dataContainsContainer: false flag tells the editor that the root tag is essentially a container for inner tags, so inner tags should not be enveloped to container.

The framework: "b4" flag switches the editor to the Bootstrap 4 mode.

JavaScript:
var elBtn = document.getElementById("btn");
elBtn.addEventListener("click", function() {
    var elInput = document.getElementById("content");
    BE2.openByInput(elInput, {
        framework: "b4",
        dataContainsContainer: false
    });
});
HTML:
<textarea id="content">
    <div class="row">
        <div class="col-12">
            Some content
        </div>
    </div>
</textarea>

<button id="btn">Edit</button>

Editing arbitrary HTML code

To edit your HTML code fetched from any given source (for example, from a database), but not presented in the DOM-tree or input fields values, use the openByHTML API method.
It opens Bootstrap Editor with your content, and when the content is saved it will execute your own callback function onSave.

Please note that content in Bootstrap container is not enveloped to rows and columns. Bootstrap Editor always handles such situations correctly and envelopes the content to appropriate tags if necessary which results in the code with correct Bootstrap markup.

var html = "<div class='container'><p>Some text</p></div>";
BE2.openByHTML(html, {
    onSave: function(elResult) {
        console.log("Result code:");
        console.log(elResult);
    }
});