English version was created automatically using Drupal module auto_node_translate and free DeepL translator.

Tutorial for custom CKEditor Widget plugin for layout creation with Boostrap 4 Grid system support - Part 1

zveřejněno 2019-07-12

CKEditor and Boostrap need no introduction. But strangely enough, I didn't find any layout design plugin that suited me with Boostrap 4 support.

For a web programmer, implementing Bootsrap Grid is not a problem. And some kind of grid is always useful, because some kind of two-column, n-column... is used very often, and you need to think about responsive display. But how is a regular user creating content that needs an "editor like Word" supposed to do that?

CKEditor4 logo

Strangely enough, I haven't found any plugin (https://ckeditor.com/cke4/addons/plugins/all) for CKEditor that addresses this. Either it was made for the older Boostrap 3, or it was paid for, or it was too complicated and convoluted, or it just didn't accomplish what I wanted. However, there are at least some to take inspiration from - https://ckeditor.com/cke4/addon/btgrid.

And what requirements did I come up with?

  • support for basic layouts like 6-6, 4-4-4, 9-3 ...
  • optionally display a title above the layout
  • option to change an existing layout, while keeping the content
  • option to copy the column content, even to another tab (same browser)

Basically nothing too non-standard, you just need to know a bit of JavaScript to do it. Still, it's a bit of work.

Making CKEditor

CKEditor since version 4.3 supports so-called widgets https://ckeditor.com/docs/ckeditor4/latest/guide/dev_widgets.html, which is exactly what I need. The plain Dialog (https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.ht…) is not enough.

The default CKEditor does not include Widgets (nor Widget Context Menu, Widget Section), so you have to add them in the Builder https://ckeditor.com/cke4/builder.

CKEditor Builder

Another thing that worked well for me during development is the "CKEDITOR.timestamp setting, see the Force CKEDITOR to refresh config" thread https://stackoverflow.com/questions/14940452/force-ckeditor-to-refresh-…. Otherwise, you would still need to deal with browser cache.

simplebox - sample CKEditor plugin with widget support

First, you need to get a little bit of an understanding of how CKEditor actually works. The ideal place to start is with examples that are well documented:

CKEditor simplebox widget

If you manage to get the sample plugin working - while doing so, be sure to

Then you can try changing something in the simplebox (maybe just the label), and if that translates after a page reload (so the CKEditor caching is resolved), then we're ready to get started on the actual plugin.

CKEditor plugin for Boostrap 4 Grid Layout System

First a little theory on what the "Bootstrap 4 Grid System" https://getbootstrap.com/docs/4.0/layout/grid/ or https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp actually is.

Sample code is this three column layout:

Boostrap Grid

Our plugin should be able to (as written at the beginning)

  • support basic layouts such as 6-6, 4-4-4, 9-3 ...
    • which means add/delete "col divs", and set their correct classes
  • optionally display a title above the layout
  • add/delete an entire div
  • the ability to change an existing layout, while preserving the content
    • store the content of "columns" in variables
    • the ability to copy the content of a column, even to another tab within the browser
    • use LocalStorage - setItem() and getItem()

     And here's a sample of what our plugin will do, and what its capabilities look like:

    bs4grid widget options
    bs4grid widget
    bs4grid source

    Summary

    In this article, we've shown what a CKEditor Widget is, and what such a sample widget looks like and how it works. And also we have shown how such a Widget can work for creating a layout based on Boostrap 4 Grid system. We'll show how to do that specifically next time.