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

Bootstrap Editor add-on for CKEditor

Bootstrap Editor seamlessly integrates to CKEditor and allows you edit the structure of Bootstrap or Foundation blocks. You can call Bootstrap Editor to edit the entire content or just the selected block.

Install this plugin just as you install any other CKEditor add-on.

For even more comfort: Bootstrap Include is already included to the package to simplify linking the framework to the editor.
If you use Foundation, Bootstrap Editor also includes Foundation-versions of plugins.

Plugins

Common

Full-functional structure and content editor with CKEditor on board.
Helps you to attach Bootstrap styles to your document, so they will be displayed with appropriate sizes and positions defined by Bootstrap CSS.

Installation

  1. Unpack archived files directly to ckeditor/plugins.
  2. Turn on the plugin in ckeditor/config.js:
    config.extraPlugins = 'jsplus_bootstrap_include,jsplus_bootstrap_editor';
  3. Add these buttons to the toolbar definition:
    • jsplus_bootstrap_editor - the button for editing whole the content within Bootstrap Editor
    • jsplus_bootstrap_editor_selected - the button for editing selected block within Bootstrap Editor
    See sample CKEditor toolbar configuration to find out more about this step. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.
  4. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.

Configuration

Optionally, you can configure the plugin for your needs. A number of parameters are available for that. Parameters are a key-value structure that's passed along with the main config of CKEditor.

You can specify this parameters in standard CKEditor configuration file ckeditor.js:


config.jsplus_bootstrap_editor = {
	key1: "value1",
	key2: true
};
		  

If you do not use config.js or prefer not to change it, you can pass these parameters as the second argument of function CKEDITOR.replace which you use for CKEditor initialization. For example:


CKEDITOR.replace("textAreaId", {jsplus_bootstrap_editor: {key: "value"}});
		  

For Drupal 8 users we recommend to configure all parameters via control panel if CMS (all options of the plugins are located on configuration page of CKEditor).

Explore the list of available options to see what settings are available to you.