Install Blk42 in CKEditor 4

Blk42 adds Bootstrap/Tailwind layout features for your CKEditor 4. Then you can insert a new block with selected grid layout, edit the grid, fill the block with contents, and save blocks as templates for future use.

• Download

  Get Blk42 plugin for installing into your existing CKEditor 4 editor.

  Note: the latest version of CKEditor available for free is 4.22.1.

  Download Plugin

• Unpack

  Unpack the archive with the plugin into the plugins/ directory of CKEditor this way:

  ckeditor/
    plugins/
      blk42/
         plugin.js

• Enable

  In your JavaScript code initializing CKEditor 4 add Blk42 to the plugins list:

  config.js

  CKEDITOR.editorConfig = function(config) {
      config.extraPlugins = "blk42";
  
      // apiKey: "...",
      // Get in the Dashboard: https://blk42.com/dashboard
  }

  Direct initialization

  CKEDITOR.replace("editorId", {
      extraPlugins: "blk42",
  
      // apiKey: "...",
      // Get in the Dashboard: https://blk42.com/dashboard
  });

• Ready to Use

Configuration

Configure your Blk42 CKEditor 4 installation with visual configuration editor. Set Bootstrap/Tailwind options, share custom blocks between your websites.

Dashboard

Examples

Live CodePlay examples for CKEditor 4 with JS/CSS/HTML code provided.

• Bootstrap in CKEditor 4
• Tailwind in CKEditor 4

Other integrations

Use one of this articles if they better describe your case:

• CKEditor 4 (React) - manual for those who implement CKEditor 4 in React app