Extended Rich Text Editor for PrestaShop 1.7

In this guide I want to show step by step how to extend rich text editor in new PrestaShop 1.7.

Modification of JavaScript File

Open /js/admin/tinymce.inc.js file and replace contents there with code below:

/**
 * Change default icons to marerial icons
 */
function changeToMaterial() {
  var materialIconAssoc = {
    'mce-i-code': '<i class="material-icons">code</i>',
    'mce-i-visualblocks': '<i class="material-icons">dashboard</i>',
    'mce-i-charmap': '<i class="material-icons">grade</i>',
    'mce-i-hr': '<i class="material-icons">remove</i>',
    'mce-i-searchreplace': '<i class="material-icons">find_replace</i>',
    'mce-i-none': '<i class="material-icons">format_color_text</i>',
    'mce-i-bold': '<i class="material-icons">format_bold</i>',
    'mce-i-italic': '<i class="material-icons">format_italic</i>',
    'mce-i-underline': '<i class="material-icons">format_underlined</i>',
    'mce-i-strikethrough': '<i class="material-icons">format_strikethrough</i>',
    'mce-i-blockquote': '<i class="material-icons">format_quote</i>',
    'mce-i-link': '<i class="material-icons">link</i>',
    'mce-i-alignleft': '<i class="material-icons">format_align_left</i>',
    'mce-i-aligncenter': '<i class="material-icons">format_align_center</i>',
    'mce-i-alignright': '<i class="material-icons">format_align_right</i>',
    'mce-i-alignjustify': '<i class="material-icons">format_align_justify</i>',
    'mce-i-bullist': '<i class="material-icons">format_list_bulleted</i>',
    'mce-i-numlist': '<i class="material-icons">format_list_numbered</i>',
    'mce-i-image': '<i class="material-icons">image</i>',
    'mce-i-table': '<i class="material-icons">grid_on</i>',
    'mce-i-media': '<i class="material-icons">video_library</i>',
    'mce-i-browse': '<i class="material-icons">attachment</i>',
    'mce-i-checkbox': '<i class="mce-ico mce-i-checkbox"></i>',
  };
 
  $.each(materialIconAssoc, function (index, value) {
    $('.' + index).replaceWith(value);
  });
}
 
function tinySetup(config) {
 
  if (typeof tinyMCE === 'undefined') {
    setTimeout(function () {
      tinySetup(config);
    }, 100);
    return;
  }  
  if (!config) {
    config = {};
  }
 
  if (typeof config.editor_selector != 'undefined') {
    config.selector = '.' + config.editor_selector;
  }
 
  var default_config = {
    selector: ".rte",
    browser_spellcheck: true,
    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: baseAdminDir + "filemanager/",
    filemanager_title: "File manager",
    external_plugins: {"filemanager": baseAdminDir + "filemanager/plugin.min.js"},
    language: iso_user,
    skin: "prestashop",
    menubar: false,
    statusbar: false,
    relative_urls: false,
    convert_urls: false,
    entity_encoding: "raw",
    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,
    init_instance_callback: "changeToMaterial"
  };
 
  $.each(default_config, function (index, el) {
    if (config[index] === undefined)
      config[index] = el;
  });
 
  // Change icons in popups
  $('body').on('click', '.mce-btn, .mce-open, .mce-menu-item', function () {
    changeToMaterial();
  });
 
  tinyMCE.init(config);
}

After modifications your editor will be extended. If you will go to product edit page, cms edit page, category edit page etc. you should see extended editor like below (see screenshot).

If you dont see it - this means that your browser probably remember old .js file. You just have to clear browser cache to see the changes.

Extending Validate class to accept javascripts etc It's also easy. Open file: /classes/Validate.php and search for isCleanHtml function. This function is a textbox contents validate function. It removes unaccepted code from textboxes witch rich text editor. We must change this function from:

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

to

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