Opencart - тюнинг полей описания (CKeditor)
В Opencart для описаний товара, категории, статей и т.д. используются поля описания. Такие, как на рисунке ниже.
Технически это реализовано с помощью компонента CKEditor - свободного WYSIWYG-редактора, который может быть использован на веб-страницах. В поле описания отображается описание продукта, категории, статьи и т.д. в том виде, который вы увидите в магазине. Это основное достоинство WYSIWYG-редактора.
Разработчики CKEditor заложили в своё детище гораздо больше возможностей, чем первоначально доступно в Opencart. Настало время устранить эту историческую несправедливость :)
Всё гениальное просто
Этот способ подойдёт для большинства людей.
Чтобы включить скрытые возможности CKEditor, нам нужно в файле admin\view\javascript\ckeditor\config.js заменить строку config.toolbar = 'Custom'; строкой config.toolbar = 'Full';
Не правда ли, просто?
А вот что получим в итоге:
Заметили, сколько новых кнопок появилось на тулбарах CKEditor’а? Неплохой профит, правда?
Тут и предварительный просмотр, и шаблоны, и поиск с заменой, возможность убрать форматирование (если вы откуда-то вставляете описание), цитаты, смайлики, стили, возможность отображать блоки...
Кстати, на просторах интернета можно найти различного рода vqmod-файлы, делающие то же самое, но более сложным путём: десятки строк кода, проблемы с совместимостью, необходимость устанавливать vqmod. Помните, простота - залог успеха.
В глубины CKEditor’а
Надеюсь, не все ограничились предыдущим способом, и некоторым стало интересно, что же ещё можно "подкрутить" в этом компоненте. Поэтому двигаемся дальше.
Для начала пару ссылок:
Очень полезные ссылки. Документация хорошая и подробная. И всё, что написано здесь, можно найти в документации. Рекомендуется в закладки.
В опенкарте CKEditor расположен в папке admin\view\javascript\ckeditor\.
Наиболее полезные файлы -- это ckeditor.js (собственно, сам компонент) и config.js (конфигурация компонента).
Изучаем конфиг
Например, в строчке config.language = 'fr'; задаётся язык по умолчанию. Смело меняем fr на ru.
Строки config.filebrowserWindowWidth = '800'; и config.filebrowserWindowHeight = '500'; задают ширину и высоту компонента. Здесь интересна больше высота. Если у вас большие по объёму тексты описания, логичным будет увеличить высоту компонента. Будет удобней.
Строка config.resize_enabled = false; -- вкл/выкл возможность менять размер компонента. Странно, что она отключена. Ставим true вместо false.
Ещё одна полезная фича – использовать свою конфигурацию в отдельном файле. Удобно тем, что можно безболезненно обновлять CKEditor, не затрагивая конфигурацию. Делается так:
В файле конфигурации config.js добавляем строчку customConfig : 'myconfig.js';
То есть мы указали использовать в качестве конфига файл myconfig.js. Где взять этот файл? Делаем копию файла config.js, переименовываем её в myconfig.js, настраиваем как нужно.
Настриваем тулбары
Тулбары – это строки с иконками в верхней части компонента.
По умолчанию в конфиге их два: Custom, который установлен по умолчанию, и Full, с полным набором возможностей, о котором говорилось выше.
В конфиге тулбары описываются так:
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];
Запись понятна и с ней не так уж сложно разобраться. Как вы можете видеть, символ '/' разделяет строки тулбара, символ '-' добавляет разделитель (вертикальная чёрточка) внутри строки, группы иконок в строке заключаются в символы […], название тулбара записывается в строчке config.toolbar_Full после символа подчёркивания.
Взяв за образец запись тулбара Full, Вы можете настроить его как Вам удобно, например, убрать невостребованные иконки, поменять их местами, удобно сгруппировать по строкам.
В динамике
CKEditor можно настраивать динамически. Т.е., для разных страниц делать разную конфигурацию и поведение CKEditor. Например, настроим шаблон редактирования категории.
Открываем файл admin\view\template\catalog\category_form.tpl
Ищем ближе к концу файла примерно такой код:
<script type="text/javascript" src="view/javascript/ckeditor/ckeditor.js"></script>
<script type="text/javascript"><!--
<?php foreach ($languages as $language) { ?>
CKEDITOR.replace('description<?php echo $language['language_id']; ?>', {
filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
});
<?php } ?>
//--></script>
<script type="text/javascript"><!--
Начиная со строки filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>', идут настройки CKEditor.
Мы можем добавить toolbar : 'Full', и в шаблоне CKEditor будет отображать полный тулбар. Т.е., можно делать по аналогии с файлом конфига. Но если в конфиге строчки начинаются со слова .config, то здесь их нужно писать без начального слова .config.
Динамически конфигурируя и настраивая CKEditor, вы можете настроить поля описания как вам удобно в каждом конкретном случае.