Mecha CMS

Mecha CMS blog and documentation.

Customizing the Post Editor Buttons

Updated: Sunday, 07 August 2016

Possibility to add some extra functional buttons on the post editor toolbar.

On the next version, users/developers will be able to add some extra functional buttons on the post editor through Mecha’s DASHBOARD.composer object. This is due to the update of the MTE plugin used by Mecha. MTE (Markdown Text Editor) is just another JavaScript project created by me. MTE is a JavaScript plugin used to automatically replace a <textarea> element into a smart Markdown text editor.

Here is the basic JavaScript function for adding an emoticon button to the post editor toolbar:

DASHBOARD.composer.button('smile-o', {
    title: 'Emoticon',
    click: function(e, base) {
        base.grip.insert(':)');
    }
});

Save the JavaScript code to somewhere, then call it with the Asset::javascript() method:

Weapon::add('SHIPMENT_REGION_BOTTOM', function() {
    echo Asset::javascript('path/to/file.js');
}, 12);

Or you can just put it away as an inline JavaScript:

Weapon::add('SHIPMENT_REGION_BOTTOM', function() {
    echo '<script>

DASHBOARD.composer.button(\'smile-o\', {
    title: \'Emoticon\',
    click: function(e, base) {
        base.grip.insert(\':)\');
    }
});

</script>';
}, 11);

Make sure that the weapon priority is large enough (but don’t be too large) so that the JavaScript file will be injected after the lot\plugins\__editor\assets\sword\run.js file.

Result:

Image

More info about how to modify the toolbar button can be found on the wiki page of the original MTE plugin → https://github.com/tovic/markdown-text-editor/wiki/Custom-Toolbar-Buttons

Donation and Email Subscription