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

images

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

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

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

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

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

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

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

 

Включая воображение, вы сможете теперь добавлять в описании товара, категории или CMS страницы добавлять нужные иконки для оформления текста.
Снимок экрана от 2015-03-03 12:25:43

До встречи на webnewbie.ru

Comments (4)

craze
19.03.2015 - 17:04 / Ответить

Классно, спасибо

Рамиль
15.03.2016 - 18:52 / Ответить

Да, действительно классно. Евгений, спасибог, очень полезная статья.

Анастасия
29.11.2016 - 20:38 / Ответить

Здорово, только я не нашла по названию файл ,который нужно отредактировать его нет) версия 1 6 9

29.11.2016 - 22:29 / Ответить

В статье указана ссылка на файл, уточню, находиться он в директории ваш сайт/js/tinymce.inc.js, то есть ищите в корне сайта папку js и в ней ищите файл tinymce.inc.js он есть во всех версиях PrestaShop 1.5-1.6

Leave a Reply