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
Unpack
Unpack the archive with the plugin into the
plugins/directory of TinyMCE this way:tinymce/
plugins/
blk42/
plugin.js
plugin.min.jsEnable
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
TinyMCE Bundle
Download
Ready-to-Use TinyMCE bundle (ZIP) already contains Blk42 plugin and has support of Bootstrap or Tailwind layout from the scratch. Just download and use it, HTML sample included.
Download TinyMCE BundleUnpack
Unpack it somewhere into your webserver public directory. For example:
var/
www/
public/
tinymce/
tinymce.min.js
sample.htmlYou can use
sample.htmlto immediately run TinyMCE 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 TinyMCE there attaching it to the textarea or some div with the content you want to edit.
<script src="/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "#content",
// apiKey: "...",
// Get in the Dashboard: https://blk42.com/dashboard
});
</script>Ready to Use
CDN
Add the CDN Script
Script snippet provides quick loading of both TinyMCE with Blk42 plugin enabled and preconfigured.
<!-- 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.blk42.com/editor.js?apiKey=BL42B5RRdemodemodemodemo"
type="text/javascript">
</script>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 TinyMCE 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. The CDN build of the TinyMCE expects it to present on load stage passed in an URL.
Ready to Use
Configuration
Configure your Blk42 TinyMCE installation with visual configuration editor. Set Bootstrap/Tailwind options, share custom blocks between your websites.
DashboardExamples
Live CodePlay examples for TinyMCE with JS/CSS/HTML code provided.
Other integrations
Use one of this articles if they better describe your case:- TinyMCE (React) - manual for those who implement TinyMCE in React app