Code Blocks streamlines the use of custom JavaScript, CSS, XML, and {shortcode} in TinyMCE, allowing you to manage complex content with ease. It visually displays your code in a protected, non-editable block that can be inserted effortlessly via a Paste operation or the dedicated Code Blocks dialog.
Additionally, Code Blocks enables the use of modern HTML5-compliant markup, such as <div> elements inside <a> tags, which TinyMCE typically restricts for operational reasons. By nesting them within a Code Blocks XML element, this markup is preserved, ensuring full control over your content’s structure.
Note: CodeBlocks is not enabled by default and must be enabled in the Core Editor Tools options.
Configure the plugin
In the Core Editor Tools Options, check the Code Blocks option to enable it. Once enabled, the Code Blocks button will be displayed in the last row of the Tinymce editor toolbar.
Assign To User Groups
If would would like only some User Groups to use this plugin, select those User Groups from the Assign To list. As enabling CodeBlocks allows users to insert scripts, css and custom xml into content, it is recommended to assign this plugin to trusted user groups only.
Set CodeBlocks options
Enable or Disable the code types that Code Blocks supports.
- Allow Javascript - Allow Javascript code in
<script>tags in Code Blocks in the editor. - Allow CSS - Allow CSS code in
<style>tags in Code Blocks in the editor. - Allow PHP - Allow PHP code in Code Blocks in the editor. Full support will require an additional 3rd party front-end content or system plugin to be installed.
- Allow Custom XML - Allow editing of custom XML code in Code Blocks in the editor, eg:
<list></list> - Protect Shortcode - EXPERIMENTAL - Protect the contents of shortcode tags, eg:
{tag}content{/tag}from being processed as plain text by the editor, eg: wrapping them in<p>tags.
Insert and edit code with Code Blocks
To insert code using Code Blocks, click the Code Blocks button to open the dialog. In the dialog window, paste the code, which can be a mix of script, CSS, XML, or shortcode, and click Insert. The code will appear in the editor as a non-editable block.
If you want to Delete a code block, simply click on it to select it, then press the Delete or Backspace key on your keyboard.
To Edit a code block, click on it to select it and then click the Code Blocks button again to open the dialog. After making your changes, click the Update button to apply them to the editor.
