Mecha CMS

Mecha CMS blog and documentation.

Rich Text Editor in Mecha

Updated: Sunday, 07 August 2016

Integrating Rich Text Editor in Mecha CMS.

Rich Text Editor for Mecha CMS

Integrating a Rich Text Editor tool or a WYSIWYG–based text editor in Mecha becomes possible since Mecha has the feature for enabling and disabling the HTML parser engine. However, some of the RTE plugin just too easy to be installed. That’s why I never thought of making such plugin for Mecha.

Although… I ever think to make it once, with a raw Rich Text Editor library called WYSIHTML5. I was trying to match the visual appearance with the default text editor appearance, but then I have some problems with the added plugin such as this plugin which cannot expand the <textarea> element correctly because of the inline styles that’s generated by the library. Hence, I decided to stop thinking on it, unless I had more time on the other days for making over the library to make it suited with the CMS needs.

Adding Rich Text Editor Plugin Manually

The code snippet below is enough for replacing your <textarea>–based Poor Text Editor into a WYSIWYG–based text editor using CKEditor. Even so, you should understand the risks that using a Rich Text Editor will makes your Markdown plugin becomes useless (except for the backend stuff like parsing about.txt files) because here you will disable the HTML parser:

// CSS
Weapon::add('shell_after', function() use($config) {
    if($config->page_type === 'manager') {
        echo '<style>.editor-toolbar{display:none!important;visibility:hidden!important}.cke_source{font:normal normal 13px/1.4 "Courier New",Courier,Monospace!important;background-color:white!important;color:black!important}.cke_maximized{top:0!important;margin:0!important}</style>';
    }
}, 11);

// JavaScript
Weapon::add('SHIPMENT_REGION_BOTTOM', function() use($config) {
    if($config->page_type === 'manager') {
        echo Asset::javascript($config->protocol . 'cdn.ckeditor.com/4.4.7/full/ckeditor.js');
        echo '<script>!function(e,t,n){if(void 0!==n.composer){var o=t.getElementsByName("content_type");o.length&&(o[0].checked=!1,o[0].parentNode.parentNode.parentNode.style.display="none"),CKEDITOR.replace(n.composer.grip.area.getAttribute("name"))}}(window,document,DASHBOARD);</script>';
    }
}, 11);

Copy the code snippet above then paste in your functions.php file. Done!


Original Output

CSS

<style>
.editor-toolbar { /* Hide the `MTE` toolbars! */
  display:none !important;
  visibility:hidden !important;
}
.cke_source {
  font:normal normal 13px/1.4 "Courier New",Courier,Monospace !important;
  background-color:white !important;
  color:black !important;
}
.cke_maximized {
  top:0 !important;
  margin:0 !important;
}
</style>

JavaScript

<script src="http://cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
<script>
(function(w, d, base) {
    if (typeof base.composer === "undefined") return;
    var check = d.getElementsByName('content_type');
    if (check.length) {
        // Force disable HTML parser
        check[0].checked = false;
        // `.grid-group < .grid < label < input[name="content_type"]`
        check[0].parentNode.parentNode.parentNode.style.display = 'none';
    }
    CKEDITOR.replace(base.composer.grip.area.getAttribute('name'));
})(window, document, DASHBOARD);
</script>
Donation and Email Subscription