Prestashop TinyMCE editor funcionalidad completa. Soporte para todas las etiquetas html

Si alguna vez has necesitado hacer uso de alguna funcionalidad avanzada del editor TinyMCE con prestashop, esta es la forma de activarlas:

Para Prestashop 1.5.5+ debemos seguir los siguientes pasos:

  1. Modificamos el theme del backend

Abrimos el fichero  ADMIN_DIR/themes/default/template/helpers/form/form.tpl. En este fichero se encuentrar la función de configuracón del editor tynyMCE.

Por defecto, la función original tiene este aspecto:

$(document).ready(function()
{block name=»autoload_tinyMCE»}
tinySetup({
editor_selector :»autoload_rte»
});
{/block}
});



Tenemos que modificar la función tynySetup() para dejarla como sigue:

$(document).ready(function(){
    {block name="autoload_tinyMCE"}
        tinySetup({
            editor_selector :"autoload_rte",
            theme_advanced_buttons1 : "save,newdocument,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect, fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,search,replace,bullist,numlist,outdent,indent,blockquote,undo,redo,link,unlink,anchor,image,cleanup,help,codemagic,insertdate,inserttime,preview,forecolor,backcolor",
            theme_advanced_buttons3 : "code,tablecontrols,hr,removeformat,visualaid,sub,sup,charmap,emotions,iespell,media,advhr,print,ltr,rtl,fullscreen",
            theme_advanced_buttons4 : "styleprops,cite,abbr,acronym,del,ins,attribs,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : false,
            extended_valid_elements: 'pre[*],script[*],style[*]',
            valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
            valid_elements : '*[*]',
            force_p_newlines : false,
            cleanup: false,
            forced_root_block : false,
            force_br_newlines : true
        });
    {/block}
})

Una vez hecho este cambio, hay que ir a modificar el fichero Validate.php. Este archivo se encuentra en /classes/Validate.php.

Una vez localizado el fichero, habrá que buscar la siguiente función: 

public static function isCleanHtml($html, $allow_iframe = false)

Debemos dejarla como sigue, comentando las líneas resaltadas en verde:

public static function isCleanHtml($html, $allow_iframe = false)
{
    /*
    $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange';
    $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend';
    $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove';
    $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel';
    $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart';
    $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange';
    $events .= '|onselectstart|onstart|onstop';

    if (preg_match('/<[\s]*script/ims', $html) || preg_match('/('.$events.')[\s]*=/ims', $html) ||  preg_match('/.*script\:/ims', $html))
        return false;
*/

    if (!$allow_iframe && preg_match('/<[\s]*(i?frame|form|input|embed|object)/ims', $html))
        return false;

    return true;

}

Scroll al inicio