Использование иконок FontAwesome в текстах PrestaShop 1.6

03.03.2015 Патешин Евгений Плагины 2 Comments

Одним из приятных нововведений в PrestaShop 1.6 является интеграция библиотеки иконок FontAwesome. Для оформления текста с иконками
достаточно добавить код с тегом i и задать класс типа class=”icon-shopping-cart” в текстовом редакторе чтобы в отобразилась иконка корзины. Но что делать, если мы не знаем какой код для
нужной иконки? В этой статье мы рассмотрим пример, как добавить выбор и вставку иконки в текстовом редакторе TinyMCE.

Для этого нам потребуется плагин TinyMCE-FontAwesome-Plugin, который можно скачать по ссылке https://github.com/ebewe/TinyMCE-FontAwesome-Plugin
и некоторые изменения скрипта TinyMCE PrestaShop.
Установка.
Скачиваем плагин по указанной выше ссылке и копируем его в папку нашего магазина js/tiny_mce/plugins/
Редактировать я буду файл js/tinymce.inc.js, который мы уже исправляли для расширения возможностей редактора в статье

Нам требуется добавить в редактор три атрибута элементов
1. добавить в редакторе плагин, атрибут fontawesome в plugins

plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons fontawesome",

1	plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons fontawesome",

2. добавить атрибут |,fontawesome в toolbar для отображения кнопки выбора иконок. В нашем случае я добавляю в 4 строку

toolbar4 : "visualblocks,|,charmap,|,hr, |,fontawesome",

1	toolbar4 : "visualblocks,\|,charmap,\|,hr, \|,fontawesome",

3.Добавляем атрибут span[class]в строку extended_valid_elements, которая не будет блокировать код с иконками

extended_valid_elements : "em[class|name|id] input[*] span[class]",

1	extended_valid_elements : "em[class\|name\|id] input[*] span[class]",

И, наконец подключаем стили FontAwesome версии 3.2.1, с которым работает закачанный нами плагин

content_css: '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css',

1	content_css: '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css',

Сохраним изменения и получаем полный код tinymce.inc.js

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 : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons fontawesome",
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, |,fontawesome",
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] input[*] 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);

};

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 : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons fontawesome",

toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",

toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,",

toolbar4 : "visualblocks,|,charmap,|,hr, |,fontawesome",

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] input[*] span[class]",

content_css: '//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css',