Bootstrap Editor
CKEditor add-on
TinyMCE add-on
N1ED logo
N1ED is united plugin
for all JS+ plugins
N1ED logo Buy in bundle

Bootstrap Editor add-on for TinyMCE

The TinyMCE plugin allows evoking Bootstrap Editor directly from your editor. The plughin has two buttons - one to edit the entire content, and the other to edit just the selected block.

Also, the plugin includes plugin to enable Bootstrap (or Foundation) styles in TinyMCE.


  1. Unpack archived files directly to tinymce/plugins.
  2. Turn on the plugin in initialization script:
    plugins: 'jsplusInclude,jsplusBootstrapEditor,jsplusFileUploaderLite'
  3. Specify framework (Bootstrap or Foundation) for Include CSS/JS add-on:
    jsplusInclude: {
        framework: "b3" // or "b4", "f5", "f6", "f6x"
    b3 means Bootstrap 3 here.
    This option will affect to all other CSS framework-specific add-ons too.
    Read more about framework option or including CSS framework into the page.
  4. Add these buttons to the toolbar definition:
    • jsplusBootstrapEditor
      the button for editing whole the content within Bootstrap Editor
    • jsplusBootstrapEditorSelected
      the button for editing selected block within Bootstrap Editor
    • jsplusFastUploadImage
      Quick uploading of images and inserting their originals
    • jsplusFastUploadPreview
      Quick uploading of images and inserting their thumbnails
    • jsplusFastUploadFile
      Quick uploading of files and inserting links to them
    See sample TinyMCE toolbar configuration manual.
  5. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.


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 TinyMCE.

Pass the parameters as follows:

    selector: 'textarea',
    jsplusBootstrapEditor: {
      key1: "value1",
      key2: true

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