tiny-bs-grid

This plugin enables users to create or update Bootstrap (v3, v4) grid system within TinyMCE (v4, v5) editor.

There are 4 versions of this plugin customized for different combinations of TinyMCE (v4 or v5) and Bootstrap (v3 or v4).

Demos

• Create a bootstrap grid system

• Update an existing bootstrap grid system while maintaining the contents

• Delete a bootstrap grid system while maintaining the contents

Limitation

This plugin only creates or updates simple Bootstrap grids. Nested grids or mulitiple target screen grids are not supported.

Project Folders

• demo
  • Tiny4BS3.html (demo configuration of using this plugin for TinyMCE V4 and Bootstrap 3)
  • Tiny4BS4.html (demo configuration of using this plugin for TinyMCE V4 and Bootstrap 4)
  • Tiny5BS3.html (demo configuration of using this plugin for TinyMCE V5 and Bootstrap 3)
  • Tiny5BS4.html (demo configuration of using this plugin for TinyMCE V5 and Bootstrap 4) -plugins
  • TinyMCE4
    • bootstrap3grid (TinyMCE4 plugin to create Bootstrap3 grid system)
    • bootstrap4grid (TinyMCE4 plugin to create Bootstrap4 grid system)
  • TinyMCE5
    • bootstrap3grid (TinyMCE5 plugin to create Bootstrap3 grid system)
    • bootstrap4grid (TinyMCE5 plugin to create Bootstrap4 grid system)

Installation

1. Using TinyMCE CDN

   1. Select the plugin for your environment, for example if you have TinyMCE v4.* and you would like to create Bootstrap3 grid, select the folder plugins/TinyMCE4/bootstrap3grid.
   2. Copy the plugin folder and paste it into the application folder.
   3. Initialized the editor with following configurations (please check demos)

   tinyMCE.init({
          selector: "textarea",
          external_plugins: {
              'bootstrap3grid': '/plugins/TinyMCE4/bootstrap3grid/plugin.min.js' //local path to plugin.min.js file
          },
          theme: 'modern',
          plugins: [
              ... ' bootstrap3grid'
          ],
          toolbar: ... 'bootstrap3grid',
          content_css: [
              'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' 
          ],
      });

2. Using TinyMC locally

   1. Select the plugin for your environment, for example if you have TinyMCE v5.* and you would like to create Bootstrap4 grid, select the folder plugins/TinyMCE5/bootstrap4grid.
   2. Copy the plugin folder and paste it into the tinymce/plugins/ folder along with other tinymce official plugins in the application.
   3. Initialized the editor with following configurations:

        tinyMCE.init({
          selector: "textarea",
          theme: 'modern',
          plugins: [
              ... ' bootstrap4grid'
          ],
          toolbar: ... 'bootstrap4grid',
          content_css: [
              'https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' 
          ],
      });

Dependancies

1. TinyMCE 4+
2. Bootstrap 3+
3. jQuery 3 +

Chnage Log

• V0.1 Initial Commit - Mar 29, 2019
• V0.2 Enhancements & Bug fixes - April 9, 2019
  • Update the CSS styles to show grid borders only in Edit mode
  • Update the CSS styles to automatically show the grid width label in Edit mode
  • Disable the resize handler in IE11
  • Update the JS files to not show static width info in text
  • Update the function in JS files to detect the grid classes
  • Fix the demo/Tiny5BS4.html ending title tag typo
• V0.3 Enhancement - April 24, 2019
  • Enable users to remove bootstrap grid system while maintain the same contents

Credits:

This project was inspired and modified from tiny-grid https://github.com/aaroniker/tiny-grid author: Aaron Iker.