Bootstrap Editor
for JS, CKEditor, TinyMCE
Overview Plugins
CKEditor add-on TinyMCE add-on Drupal 8 module WordPress plugin Joomla extension JavaScript library
Configuration
Installing CKEditor to WordPress Installing CKEditor to Joomla Installing CKEditor to Drupal 7 How to install CKEditor plugin from CDN How to install a plugin to CKEditor How to adjust CKEditor settings
Include Bootstrap to CKEditor/TinyMCE CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Bootstrap Editor logo
Get Bootstrap Editor inside
33 in 1
Bootstrap Full Bundle
$79

Bootstrap Editor JavaScript library for custom integrations

This is programmer-friendly version of Bootstrap Editor can be used for integration this product inside your own applications.

You can call Bootstrap Editor from your code and let it to edit some HTML or DOM element and update is after user saves content inside the editor.

Note. If you just want to install ready-to-run Bootstrap Editor plugin onto your website, you do not need this package and please use one of Bootstrap Editor integration (see options in the menu).

Installation

Bootstrap Editor supports embedding to any of your content management systems or custom websites written with any server side technology.
You can have website on PHP, ASP.NET or Ruby On Rails and integrate the Bootstrap Editor into your web site, it does not matter: the editor is JavaScript component without server side part.

This is initialization code:

<script>
    BootstrapEditor.init('id-of-div');
</script>

You can also set a specific configuration to Bootstrap Editor passing configuration variables in this way:

<script>
    BootstrapEditor.init('id-of-div-or-textarea', {
        key1: 'value1',
        key2: 'value2'
    });
</script>

The list of supported keys and values can be found on API page.

Bootstrap Editor must be attached to div element containing list of rows. Usually this div has a class container.

If you use Bootstrap Editor inside HTML form, do not forget to call yourTextArea.value = editor.getContent() before submit action is executed.

Example

For example we have a page with content we are to edit. Here is its code with inner contents:

<div class="container" id="editor">
    <div class="row">
        <h2>Page header</h2>
    </div>
    <div class="row">
        <div class="col-xs-6">Lorem ipsum dolor sit amet</div>
        <div class="col-xs-6">Consectetur adipiscing elit</div>
    </div>
</div>

Well, just this code in any place of your HTML template:

<script>
    BootstrapEditor.init('editor');
</script>

That's all, AlphaGrid is succesfully attached to your container and you can manage Bootstrap rows and columns in visual way.

More info

If short info on this page is not enough for using in your project, please read API Page to know more about configuring and using Bootstrap Editor in custom integrations.