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

Bootstrap Editor configuration options

To configure how Bootstrap Editor should behave, you can use a number of parameters passed as a key-value structure when the editor is invoked.
The way you pass parameters to the editor depends on what edition you use. Please refer to specific instructions to each edition: CKEditor, TinyMCE or JavaScript.

framework: string
Default value: "b3"
Available values: "b3", "b4", "f5", "f6"
Specifies the framework Bootstrap Editor will use. By default it is Bootstrap 3, but if your website uses Bootstrap 4, Foundation 5 or 6 specify the corresponding value here. This parameter only makes sense when you use JavaScript API. For CKEditor/TinyMCE plugin edition, the value is fetched automatically from settings of the Include plugin (comes with Bootstrap Editor).
includeCKEditor: boolean
Default value: true
Available values: true, false
If the parameter is true, an instance of CKEditor from Bootstrap Editor will be loaded to the page. Otherwise an instance of the window.CKEDITOR global object is loaded. This parameter is not used with the CKEditor-plugin, because in this case CKEditor is already loaded, so loading another instance will result in conflict. In all other cases, the defauly value is true, but you can change it to false if you already embedded CKEditor to the page.
CKEditorConfig: CKEDITOR.config (key-value map)
Default value: null
Change this field to pass settings to the internal CKEditor that is used to edit Bootstrap columns with HTML contents. The format of the map is similar to that of the CKEditor.replace function, see the description of the CKEDITOR.config type. All values entered here will be merged.
dataContainsContainer: boolean
Default value: false
Available values: true, false
This parameter is only taken to account by openByHTML and openByInput functions of the JavaScript API and has an effect on whether the passed element is a Bootstrap/Foundation container by itself, or just its contents (a list of rows) is passed. In the latter case, the container is created.
useFluidContainer: boolean
Default value: false
Available values: true, false
If you pass the dataContainsContainer parameter set to false, and your framework is Bootstrap, this parameter tells which class the created container should be - container or container-fluid. This is used only when openByHTML and openByInput functions are called in JavaScript edition.
createDefaultRow: boolean
Default value: true
Available values: true, false
If the structure passed to Bootstrap Editor for editing does not have any rows, true in this parameter tells that a new row should be added automatically on initialization.
opaqueRows: boolean
Default value: true
Available values: true, false
If you set this option to false, Bootstrap Editor will not apply the background color to rows (making them transparent). By default all rows have striped background.
opaqueCols: boolean
Default value: true
Available values: true, false
If you set this option to false, all columns in Bootstrap Editor will have transparent background. If you have set opaqueRows to false, with the default theme all columns inside Bootstrap will have background of the container or its parent, otherwise they will have striped background of the row.
buttonSaveTitle: string
Default value: "Save"
The title for the save button on the Bootstrap Editor toolbar.
buttonCancelTitle: string
Default value: "Cancel"
The title for the cancel button on the toolbar.
onSave: function(elSrc: HTMLElement, elResult: HTMLElement): boolean
A callback function called the moment the content is saved. The elResult parameter passed to it is a root content of the element being saved. You can treat it as a DOM-element or convert it to HTML using standard JS means.
If you return false, standard save code will not be executed. Use this ability when you prefer to manually set resulting content.
This option is for JS edition only, because CKEditor & TinyMCE plugin editions process this callback on their own.
onClose: function(): void
A callback function called when the editor is closed, regardless of whether it is save or cancel. If a user clicks the save content button, onClose is called after onSave. JS edition only.