Skip to main content

Install Blk42 in TinyMCE (React)

Blk42 adds Bootstrap/Tailwind layout features for your TinyMCE in a custom React application. 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 upgrading your existing React TinyMCE installation that is managed with the standard @tinymce/tinymce-react package:

    • TinyMCE 8
    • TinyMCE 7
    • TinyMCE 6
    • TinyMCE forks
    Download Plugin

  • Unpack​

    Unpack the archive with the plugin into your project's public/ directory this way:

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

  • Enable​

    In your React component, configure a self-hosted TinyMCE editor by passing there an URL of newly downloaded plugin:

    import { Editor } from '@tinymce/tinymce-react';
    import { useState } from 'react';

    function MyEditor() {
      const [content, setContent] = useState('');

      return (
        <Editor
          tinymceScriptSrc="/tinymce/tinymce.min.js"
          value={content}
          onEditorChange={(newContent) => setContent(newContent)}
          init={{
            plugins: 'image link blk42',
            // apiKey: "...",
            // Get in the Dashboard: https://blk42.com/dashboard
          }}
        />
      );
    }

    Optionally, if you prefer to host the plugin outside of TinyMCE distribution's plugins folder, then please additionally specify a path to the plugin in the init section with this parameter:

    external_plugins: {
      blk42: '/your/url/of/blk42/plugin.min.js'
    },

  • Ready to Use​

Configuration​

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

Dashboard

Other integrations​

Use one of this articles if they better describe your case:
  • TinyMCE - manual for those who use TinyMCE without React