Install Blk42 in TinyMCE

Blk42 adds Bootstrap/Tailwind layout features for your TinyMCE. 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

• Download

  Get Blk42 plugin for upgrading your existing TinyMCE installation.
  Supported editors:

  • Editor42
  • TinyMCE 8
  • TinyMCE 7
  • TinyMCE 6
  Download Plugin

• Unpack

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

  tinymce/
    plugins/
       blk42/
          plugin.js
          plugin.min.js

• Enable

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

  tinymce.init({
      plugins: "image,link,blk42",
  
      // apiKey: "...",
      // Get in the Dashboard: https://blk42.com/dashboard
  });

• Ready to Use

Ready-to-Use Bundle

• Download

  Ready-to-Use bundle (ZIP) already contains Blk42 plugin and has support of Bootstrap or Tailwind layout from the scratch. The editor inside is Editor42 — our free MIT-licensed editor, based on TinyMCE and fully compatible with it. Just download and use it, HTML sample included.

  Download Bundle

• Unpack

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

  var/
    www/
      public/
        editor42/
          editor42.min.js
        sample.html

  You can use sample.html to immediately run the editor 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 the editor there attaching it to the textarea or some div with the content you want to edit.

      <script src="/editor42/editor42.min.js"></script>
      <script>
          // tinymce.init(...) also works — the global is aliased for compatibility
          editor42.init({
              selector: "#content",
              plugins: "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 the editor with Blk42 plugin enabled and preconfigured. The editor it loads is Editor42 — our free MIT-licensed editor, based on TinyMCE and fully compatible with it, so the usual tinymce.init() call works as is.

  <!-- Your editor placeholder -->
  <div id="editor"></div>
  
  <!-- Scripts go below the editor, order does matter -->
  <script type="text/javascript">
      window.onEditorLoaded = function() {
          tinymce.init({
              selector: "#editor",
          });
      }
  </script>
  <script
      src="https://cloud.n1ed.com/v/latest/sdk/n1ed.js?apiKey=BL42B5RRdemodemodemodemo"
      type="text/javascript">
  </script>

  Blk42 is part of the N1ED family — its scripts are served from N1ED's cloud, cloud.n1ed.com, the one loader every product of the family shares.

  You can copy this snippet in any place of your <body> tag, but scripts must go below the editor placeholder and their order is important.

• Set API key

  After the previous step your editor should load fine.

  Then you may need to use your free API key that can be obtained in the Dashboard.

  Replace default demo API key in the URL after ?apiKey= with your one.

  Please don't pass your API key as a parameter to tinymce.init(). The CDN script expects it to be present at load time, passed in the URL.

• Ready to Use

Configuration

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

Dashboard

Examples

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

• Bootstrap in TinyMCE
• Tailwind in TinyMCE

Other integrations

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

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