Opencart - тюнинг полей описания (CKeditor)

В Opencart для описаний товара, категории, статей и т.д. используются поля описания. Такие, как на рисунке ниже.

CKEditor custom toolbar

Технически это реализовано с помощью компонента CKEditor - свободного WYSIWYG-редактора, который может быть использован на веб-страницах. В поле описания отображается описание продукта, категории, статьи и т.д. в том виде, который вы увидите в магазине. Это основное достоинство WYSIWYG-редактора.

Разработчики CKEditor заложили в своё детище гораздо больше возможностей, чем первоначально доступно в Opencart. Настало время устранить эту историческую несправедливость :)

Всё гениальное просто

Этот способ подойдёт для большинства людей.

Чтобы включить скрытые возможности CKEditor, нам нужно в файле admin\view\javascript\ckeditor\config.js заменить строку config.toolbar = 'Custom'; строкой config.toolbar = 'Full';

Не правда ли, просто?

А вот что получим в итоге:

CKeditor full toolbar

Заметили, сколько новых кнопок появилось на тулбарах 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, вы можете настроить поля описания как вам удобно в каждом конкретном случае.

Tags: