Modify TinyMCE plugin configuration in PrestaShop 1.7

In this blog, we will learn how to modify the TinyMCE plugin configurations.

In PrestaShop, we use the TinyMCE plugin as a rich text editor to render formatted HTML content on pages, but there must be flexibility to modify plugin configuration as per requirement.

We were unable to modify its configuration without changing the core file. Now Prestashop 1.7.8.0 or above version overcome this issue and we can modify each configuration of this plugin from a module.

So let’s start with an example,

We have created a field in the module controller with TinyMCE editor, it creates a default UI like below

and sample code to generate this field is given below

       $this->fields_form = array(
            'tinymce' => true,
            'legend' => array(
                'title' => $this->l('Sample TinyMCE'),
                'icon' => 'icon-edit'
            ),
            'input' => array(
                array(
                    'type' => 'textarea',
                    'label' => $this->l('Description'),
                    'name' => 'description',
                    'lang' => true,
                    'autoload_rte' => true,
                    'required' => true,
                    'hint' => $this->l('Sample description'),
                    'desc' => $this->l('Sample description')
                ),
            ),
            'submit' => array(
                'title' => $this->l('Save'),
            )
        );

Now, we’ll show the modification of the above layout step by step-

Step-1:

register hook “actionAdminControllerSetMedia”, in hook definition link a javascript file like below code :

  public function hookActionAdminControllerSetMedia()
    {
        if (Tools::getValue('controller') == 'AdminSampleController') {
            $this->context->controller->addJS(_MODULE_DIR_.'demomodule/views/js/custom_tinyMCE.js');
        }
    }

Step-2:

Now add the following code in custom_tinyMCE.js, we have changed some configurations like display menubar, status bar, the language of the editor, and skin of editor. In some Prestashop versions, editors overlap its text and show outside of the editor boundary. We have also fixed it in this code.

var customTinyMCE = {
    init: function () {
        window.defaultTinyMceConfig = {
            menubar: true,
            statusbar: true,
            language: 'en', // Language ISO code for translations
            skin: 'lightgray'
        }
    },
    fixTinyMCEWidth: function () {
        setTimeout(function () {
            $('.mce-btn-group').css('float', 'left'); $('.mce-btn').css('float', 'left');
        }, 500);
    },

};
$(function () {
    customTinyMCE.init();
    customTinyMCE.fixTinyMCEWidth(); // Fixed overlapping of editor
});

Step-3:

Now the new modified editor is shown like the given screenshot. As you can see, it is loading our custom configurations instead of the default core configuration.

Note: We have modified only some configurations. You can check detailed information about TinyMCE configurations from this link:https://github.com/PrestaShop/PrestaShop/blob/0046bf590f033e2ad00594efd92873bc577bf81a/js/admin/tinymce.inc.js

Keep in mind that the config is not completely replaced, it’s an Object.assign, this means that if you want to remove a certain configuration, you’ll have to add it inside your own config, otherwise it will be kept.

That’s all about this blog.

If any issue or doubt please feel free to mention it in the comment section.

We would be happy to help.

Also, you can explore our PrestaShop Development Services & a large range of quality PrestaShop Modules.

For any doubt contact us at [email protected].