[Free Tutorial] Use FontAwesome in every TinyMCE text editor

[BlobMarket]

With the new Prestashop 1.6 theme, you can now use the icon font : FontAwesome.

 

I propose in this tutorial to install a plugin that will be displayed in the different TinyMCE text editors of your Back Office in order to facilitate the use of FontAwesome.

 

You will then be able to take maximum advantage of FontAwesome in your products descriptions, categories descriptions, CMS pages...

 

The tutorial is available here : http://blobmarket.com/blog/en/use-fontawesome-with-prestashop-1-6.html

[WSH90]

Hi, thanks for your kind sharing. I had share this to one of my post

[Serge Goujon]

Thanks. Awesome!

[stoo_s]

I'd love to be able to use this but I can't seem to get it to work. I'm running version 1.6.0.9 and have followed your tutorial exactly but I don't even have the flag button showing on the tinymce text editor. I've also cleared the cache but it's still not showing. Will it simply not work on my version of prestashop or might I be doing something wrong? This is the tinymce.inc.js file once changed:

function tinySetup(config)
{
	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 : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor fontawesome",
		toolbar1 : "code,|,bold,italic,underline,strikethrough,|,alignleft,aligncenter,alignright,alignfull,formatselect,|,blockquote,colorpicker,pasteword,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,cleanup,|,media,image,|,fontawesome",
		toolbar2: "",
		external_filemanager_path: ad+"/filemanager/",
		filemanager_title: "File manager" ,
		external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
		language: iso,
		skin: "prestashop",
		statusbar: false,
		relative_urls : false,
		convert_urls: false,
		extended_valid_elements : "em[class|name|id] span[class]",
		content_css: '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css',
                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);

};