Extending tinyMCE editor in prestashop 1.6 – the full story

Tiny MCE is the rich text editor used for editing the large multilangual text fields like product desription or content of CMS pages. The interface used in PS 1.6 is rather a moderate one and many features were ommited. Just take a look at the available buttons in the classic example .

Fortunatelly, adding extra buttons to the default PS 1.6 tiny MCE is not difficult. Specifically, you will need:

1) Modify the tinyMCE settings

Locate the /js/tinymce.inc.js file, open in in a clean text editor and add the required functionality. Simply inspect the source code in the classic example and add plugins and buttons you need. Alternatively, if this seems complicated, you may use the whole /js/tinymce.inc.js file as described in another tutorial , but be sure to complete the steps 2 and 3 as described below.

2) Disable the html validation

by modifiing the prestashop Validate.php class. For several reasons, it is considered a bad practice to modify Prestashop core classes, one of them beeing the fact that these modification will not persitst through the next upgrade. Therefore:

a) in a clean text editor (e.g. notepad), create a clean file named Validate.php and copy paste the following code inside it:

b) copy the file into the directory /override/classes/

c) delete the file /cache/class_index.php

3) In backoffice go to the Preferences :: General and set the option Allow HTML purifier to off . Without it, the HTML purifier will keep removing certain elements – for example, you will be unable to insert a new window link.

Adding YouTube video in Prestashop 1.6

Inability to embed youtube video in Prestashop 1.5 product and CMS pages raised a lot of confusion on prestashop forums and promoted development of various modules.

Fortunatelly, this issue no longer persists in Prestashop 1.6.

1) In backoffice go to the Preferences :: General and set the option Allow iframes on HTML fields to yes . This option is present at least in version PS and higher. You may neet to set the option Allow HTML purifier off as well.

2) Find the video on youtube and click on the Share option. Copy the full code into the clippoard (e.g.

3) In the backoffice, go to the product detail and locate the Description field. Find the Tools button in the editor toolbar, click it to expand and select the Source code button. Paste the youtube code copied in the previous step into the source code pop up window.

4) Press OK to close the source code pop up, press than Save and Stay to actually save the changes. You will see a large questionmark in the place you have copied the video, but this is normal and the video is visible at the frontend.

5) You can use the same approach for CMS pages.