Bootstrap Editor
for JS, CKEditor, TinyMCE
Overview Plugins
CKEditor add-on TinyMCE add-on Drupal 8 module WordPress plugin Joomla extension JavaScript library
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

Bootstrap Editor initialization, configuration and API

If you need custom integration you can use these API to interact with Bootstrap Editor instance.
This API is a list of methods and variables needed to configure and manage Bootstrap Editor. Due to Bootstrap Editor is pretty simple to use editor it has also easy API which may be used by anybody with basic knowledge of JavaScript.


Method (static): var editor = BootstrapEditor.init(id, config)

Initialize new Bootstrap Editor instance by DOM element with specified ID (id parameter). Bootstrap Editor options can be passed using config parameter.

config is the JavaScript associative array (hash) of key-value pairs. This parameter is optional.

If you have complicated URL routing system and Bootstrap Editor unable to detect self location, please use this construction before initialization of Bootstrap Editor:

window.BootstrapEditorBaseURL = 'http://your-website/url/to/BootstrapEditor';

where the value is URL of directory where bootstrapeditor.js is located in. This is important when Bootstrap Editor can not load its CSS.

Parameters list

frameworkName: String
Default value: bootstrap
Available values: bootstrap, litestrap
Framework to use. Currently Bootstrap Editor supports Bootstrap framework (by default) and you can switch to Litestrap tiny framework.
frameworkInclude: Boolean
Default value: true
Available values: true, false
Framework's CSS file will be included to the page with Bootstrap Editor if this option is true. Set it to false to omit loading framework's CSS file in case you already manually attached it to the page. URL of CSS is detected automatically (will be loaded from BootstrapEditor/css folder.
createDefaultRow: Boolean
Default value: true
Available values: true, false
When Bootstrap Editor editor opens empty document (without HTML contents) it can automatically add new row on initialization. If this value is set to true new row will be created with full-width column inside it.
width: String
Default value: 100%
If you want to limit Bootstrap Editor area width please specify this parameter. Its value is string with CSS width definition. For example 100% or 700px.
includeCKEditor: Boolean
Default value: true
Available values: true, false
If you run Bootstrap Editor on website with already loaded CKEditor instance, for compatibility reasons you must not load it twice: CKEditor does not support multiple versions on one page (has not "no-conflict" mode like JQuery), so you need to set it to false in this case in your custom integration
showSaveButton: Boolean
Default value: false
Available values: true, false
If this value is set to true the "Save" button will be shown. You can handle click on it with onSave event listener (parameter).
saveButtonTitle: String
Default value: Save
Available values:
The title for "Save" button.
onSave: function(editorInstance)
Default value: null
Event listenter for "Save" button click.
showCancelButton: Boolean
Default value: false
Available values: true, false
If this value is set to true the "Cancel" button will be shown. You can handle click on it with onCancel event listener (parameter).
cancelButtonTitle: String
Default value: Cancel
Available values:
The title for "Cancel" button.
onCancel: function(editorInstance)
Default value: null
Event listenter for "Cancel" button click
CKEditorConfig: Hash (Associative array)
Default value: {}
Custom configuration for CKEditor. Use it if you want to redefine CKEditor configuration (this parameter has more priority than file config.js). The syntax of this hash it the same as the second parameter in CKEDITOR.inline(id, config) function.
Mostly this parameter is used to define CKEditor plugins and buttons list.

Usage example (default parameters):

var editor = BootstrapEditor.init('id-of-div');

Initializing with using Litestrap framework:

var editor = BootstrapEditor.init('id-of-div', {frameworkName: "litestrap"});

Getting contents

Method: var contents = editor.getContent();

This method can be called when you need to save contents of Bootstrap Editor instance. HTML code will be result of calling this method.

The getContent() method is per-instance method. You can call it only with instance's pointer previously obtained when you called BootstrapEditor.init(id, config) method.

For example if you use pure JS you can add listener to your button with ID submit-button and save contents after getting HTML from Bootstrap Editor instance stored in editor variable in this way:

document.getElementById("submit-button").click = function() {
    var content = editor.getContent();
    // Here goes your code for submitting content to server

Including framework CSS

Sometimes you already have Bootstrap Editor connected on your website and need to attach CSS framework to your webpage without initializing editor itself.

Method (static): BootstrapEditor.includeFramework(frameworkName)

Specify as framework CSS markup framework used in your project: litestrap or bootstrap. For example:


...and required CSS files will be included into current document <head> tag.