Configuration

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.
Please see how to pass parameters on creating an instance of Bootstrap Editor using SDK. If you use CKEditor/TinyMCE add-on please follow according guide of format of used editor.

framework: string
Default value: b3
Available values: b3, b4, f5, f6, f6x
For JavaScript SDK edition only. CKEditor and TinyMCE add-ons use the value of framework parameter of Include CSS & JS plugin Framework of content. Note that Bootstrap Editor will not include your framework into the page, you need to do this manually inside your theme. CKEditor/TinyMCE add-ons include framework automatically. b3 means Bootstrap 3, b4 - Bootstrap 4, f5 - Foundation 5, f6 - Foundation 6 (legacy layout), f6x - Foundation 6 (XY Grid layout, "grid-x" horizontal rows).

HTMLEditorConfig: {[key: string]: any}
Default value: null
Change this field to pass settings to the internal CKEditor or TinyMCE that is used to edit Bootstrap columns with HTML contents. The format of the map is similar to that of the CKEditor.replace or tinymce.init function, see the description of the CKEditor configuration options and TinyMCE configuration options All values entered here will be merged.

contentMode: string
Default value: "auto"
Available values: "auto", "wrap", "container"
The mode of content passed to Bootstrap Editor.
There are three choices:

"auto" - intellectual choosing between "container" and "wrap" modes.
"container" - passed element is container itself and contains a list of rows. For CKEditor/TinyMCE add-on in not inline mode it means <body> element or wrap of whole the editor is container. This mode uses useFluidContainer to understand which type of container is its class is not set.
"wrap" - passed element is a wrap for container

useFluidContainer: boolean
Default value: false
Available values: true, false
The class to add to container element in contentMode = "container" when it does not contain it.
This option is only possible for Bootstrap frameworks (Foundation does not have special container classes).

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.

useUIFlexbox: boolean
Default value: true
Available values: true, false
In non-flexbox frameworks by default there is no ability to show columns in the editor in beautiful way (with equal heights). That's why Bootstrap Editor changes layout of rows and columns to flexbox (in UI only). But this behaviour can cause some UI problems with preview some types of columns on small screen sizes. Please disable this option is you have any problems. For Bootstrap 3 and Foundation 5 and Foundation 6 (except Grid-XY layout) frameworks only.

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.

onDecode: function(el: HTMLElement): void
A callback for decoding content before opening Bootstrap Editor. If you need you can filter content here updating el. Use it in pair with onEncode callback. For SDK edition only.

onOpen: function(): void
A callback function called after Bootstrap Editor instance is created and shown. For SDK edition only.

onEncode: function(el: HTMLElement): void
A callback for encoding content before saving is (called right before onSave event). If you have modified content on onDecode you might want to use this event too. For SDK edition only.

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.
For SDK edition only.

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. For SDK edition only.