¿Alguna vez has querido cambiar el tipo o tamaño de letra en las descripciones de tus productos? ¿o en las páginas CMS? No habrás podido hacerlo. Tienes que mejorar el editor de texto en Prestashop. Es muy sencillo, aquí te explico cómo

Cómo mejorar el editor de texto en Prestashop

El editor de texto por defecto de Prestashop (el conocido como tinyMCE) es demasiado austero, nos permite muy poca cosa a la hora de dar estilo a tus textos de productos o de cms.

Por ejemplo, no tienes herramientas para cambiar el tamaño del texto, o la fuente, o el formato en general. Y como este editor es común a todas las áreas de entrada de texto, te afecta en los productos, categorías, páginas cms, blog (si lo tienes integrado en tu prestashop) etc.

Modificar el editor de texto

Necesitaremos modificar dos ficheros, así que recuerda hacer siempre antes copia de seguridad de los mismos.

Localiza /js/tinymce.inc.js o /js/admin/tinymce.inc.js, depende de tu versión de prestashop, será uno u otro. Ten en cuenta que esta solución es para 1.6

Sustituye todo el contenido por el siguiente:

function tinySetup(config)
{
   if (typeof tinyMCE === 'undefined') {
      setTimeout(function() {
      tinySetup(config);
      }, 100);
      return;
   }
  
    if(!config)
        config = {};
  
    var editor_selector = 'rte';
    //if (typeof config['editor_selector'] !== 'undefined')
    //var editor_selector = config['editor_selector'];
    if (typeof config['editor_selector'] != 'undefined')
        config['selector'] = '.'+config['editor_selector'];
  
        //safari,pagebreak,style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,xhtmlxtras,preview
        default_config = {
        selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons",
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,", 
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",
        toolbar4 : "visualblocks,|,charmap,|,hr,",
             
        external_filemanager_path: ad+"/filemanager/",
        filemanager_title: "File manager" ,
        external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
        extended_valid_elements: 'pre[*],script[*],style[*]', 
        valid_children: "+body[style|script|iframe|section],pre[iframe|section|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,  
        convert_urls:true,
        relative_urls:false,
        remove_script_host:false,
           
        menu: {
            edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
            insert: {title: 'Insert', items: 'media image link | pagebreak'},
            view: {title: 'View', items: 'visualaid'},
            format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
            table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
            tools: {title: 'Tools', items: 'code'}
        }
  
    }
  
    $.each(default_config, function(index, el)
    {
        if (config[index] === undefined )
            config[index] = el;
    });
  
    tinyMCE.init(config);
  
}
  
$().ready(function() {
   tinySetup(); 
});

Guarda los cambios, vacía la caché del navegador y vuelve a cargar tu página de edición de producto o cms. Tu editor ahora será como éste:

Ahora localiza el fichero /classes/Validate.php

Busca el código siguiente:

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; }

Y reemplázalo por éste:

public static function isCleanHtml($html, $allow_iframe = false) { return true; }

Ahora ya está todo listo para que puedas utilizar tu nuevo editor de texto.

Mi agradecimiento a los amigos de mypresta.eu, donde encontré información para este turial, y donde además, podéis encontrar un módulo aún más avanzado de tinyMCE. Pasaros por allí a echar un vistazo, tienen muchos módulos gratis para prestashop

Mucha suerte y mucho ecommerce! 🙂