Install Blk42 in CKEditor 5

Blk42 adds Bootstrap/Tailwind layout features to your editor implementing best practices of CKEditor 5. 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.

Plugin

• Install NPM package

  Blk42 plugin is distributed in an NPM package that is easy to add into your existing CKEditor 5 build project for further compilation.

  npm install --save-dev @blk42/blk42-ckeditor5

• Include to build

  Add Blk42 into your import section:

  import {
      ClassicEditor,
      Image,
      Essentials,
      Paragraph,
      Bold,
      Italic
  } from 'ckeditor5';
  import Blk42 from "@blk42/blk42-ckeditor5";

  Then pass this plugin to the plugins section of your ClassicEditor creation method call and set the API key:

  ClassicEditor.create(
      document.querySelector('#editor'), // your editor selector
      {
          plugins: [
              Essentials,
              Paragraph,
              Bold,
              Italic,
              Blk42
          ],
          Blk42: {
              // apiKey: "...",
              // Get in the Dashboard: https://blk42.com/dashboard
          }
      }
  ).then( editor => {
      console.log(editor);
  } ).catch( error => {
      console.error(error.stack);
  } );

• Build

  Build your CKEditor 5 project or your project with CKEditor 5 imported to apply newly added plugin.

  If you see a new bottom toolbar of the editor, everything works fine.

• Ready to Use

CKEditor 5 Bundle

• Download

  Ready-to-Use CKEditor 5 bundle already contains Blk42 plugin precompiled and enabled and has support of Bootstrap or Tailwind layout from the scratch. Just download and use it, HTML sample included.

  Download CKEditor 5 Bundle

• Unpack

  Unpack it somewhere into your webserver public directory. For example:

  var/
    www/
      public/
        ckeditor5/
          ckeditor5-blk42.js
        sample.html

  You can use sample.html to immediately run CKEditor and check how it works, even outside of a webserver. Then you may want to remove this file if it doesn't needed anymore.

• Attach to content box

  Add script link onto your page and initialize CKEditor 5 there attaching it to the textarea or some div with the content you want to edit.

      <script src="/js/ckeditor5-blk42.js"></script>
      <script type="text/javascript">
          CKEditor5WithBlk42.create(
              document.querySelector('#editorId'),
              {
  
                  Blk42: {
                      // apiKey: "...",
                      // Get in the Dashboard: https://blk42.com/dashboard
                  }
  
              }
          );
      </script>

• Ready to Use

CDN

• Add the CDN Script

  Script snippet provides quick loading of CKEditor 5 with Blk42 plugin enabled and preconfigured.

  <!-- Load CKEditor 5 with Blk42 plugin -->
  <script src="https://cloud.blk42.com/v/latest/sdk/ckeditor5-blk42.js"></script>
  
  <!-- Your editor placeholder -->
  <div id="editorId"></div>
  
  <script type="text/javascript">
      CKEditor5WithBlk42.create(
          document.querySelector('#editorId'),
          {
              Blk42: {
                  // apiKey: "...",
                  // Get in the Dashboard: https://blk42.com/dashboard
              }
          }
      );
  </script>

• Ready to Use

Configuration

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

Dashboard

Examples

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

• Bootstrap in CKEditor 5
• Tailwind in CKEditor 5

Other integrations

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

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