By default, the text editor tinymce is really basic on Prestashop 1.7 :
We can extend the text editor in order to get more options like insert videos, add html anchor, insert date, etc.
Prestashop 1.7 tinymce extended
Here is the code snippet to extend the texte editor :
Replace the content of this file with the code snippet : /js/admin/tinymce.inc.js
/**
* 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);
}