Ruslan Brest, rb.labtodo.com
Backend web-developer: CodeIgniter, PHP, MySQL, OpenCart, PrestaShop, MaxSite CMS

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

Просмотров: 48344 RSS 21
Howto » E-commerce » OpenCart
, ,

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

twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru ya.ru digg.com friendfeed.com liveinternet.ru livejournal.ru yandex.ru del.icio.us
Комментариев: 21
  1. Спасибо!!! Ты гений!

  2. Спасибо! Очень полезная статья. А есть ли способ уменьшить расстояние между строк при использовании символа переноса строки. По умолчанию расстояние очень большое и чтоб сделать его меньше я текст набираю сначала в обычном текстовом редакторе, а потом вставляю на сайт.

  3. реально . спасибо!

  4. А есть ли способ уменьшить расстояние между строк при использовании символа переноса строки
    Комментатор 78
    , какое расстояние имеется ввиду? Когда текст выводится на в магазине? Или в CKEditor'е в админке?

  5. А как насчет подсветки исходного кода? Нет плагина случайно?

  6. Я такого для CKEditor'а не встречал. Поищите на их офсайте, возможно что-то найдёте подходящее Вам.

  7. 2012-12-18 в 02:01:03 | Алексей

    Откройте, пожалуйста, тайну, как можно подключить CKEditor'а к атрибутам в описании товара.

    Проблема такая, когда я хочу добавить описание товара в аттрибутах в админке, но там текст никак не редактируется, даже нельзя строчку перенести, все сплошным текстом идет.

  8. 2012-12-19 в 03:38:07 | Ruslan Brest

    Помимо подключения CKEditor понадобится ещё изменить логику обработки этого поля. Везде, где оно встречается - в админке, в массе мест в магазине, при оформлении заказа и т.д. и т.п. Это весьма объёмная задача.

  9. 2012-12-19 в 09:25:02 | Алексей

    Может какой то другой вариант есть? Там текст никак вообще не отредактировать.

    Сплошняком идет.

  10. Руслан прав. Описание товара в аттрибутах хранится и обрабатывается как текст. Чтобы там можно было хранить html-текст, нужно изменить логику: хранения, обработки, отображения. Всё это в разных местах. Само описание товара в аттрибутах предназначено только для хранения небольших текстовых данных.

  11. 2012-12-22 в 02:30:58 | Ruslan Brest
    Может какой то другой вариант есть? Там текст никак вообще не отредактировать. Сплошняком идет.

    Других вариантов нет. Либо переделывать то, что не устраивает, либо пользоваться тем, что есть. Чтобы получить возможность делать там какие-то переносы, верхние/нижние индексы или цвет текста, например, надо использовать либо HTML в том поле, либо некий макроязык. И в одном, и в другом случае требуется перелопатить весь код Опенкарт в поисках всех мест, которых коснутся изменения вывода этого поля - на экран, в письма, в заказ, в админке и т.д и т.п. Быстро и просто эта задача не решается.

  12. Добрый день.

    Подскажите как добавить кнопку "insert/edit image map" в CKEditor. И если такое возможно с выбором ссылки на сервере или на товары opencart.

  13. 2013-04-03 в 20:22:09 | Александра

    Здравствуйте! Скажите, пожалуйста, не знаю как так получилось, но у меня совсем пропала таблица редактирования. То есть в описании только html. Изменений никаких не делала. Просто открыла внести товар и нет таблицы. Что делать? Помогите, пожалуйста, если знаете в чем дело. Opencart 1.5.3.1

  14. Спасибо за статью,автор! Мне, как начинающему очень помогла Ваша информация.

  15. Для изменения высоты окна кроме параметра config.filebrowserWindowHeight = '1000'; нужно добавить config.height = '1000px';

  16. 2013-08-02 в 07:09:44 | Владимир

    Добрый день!

    Добавил к товару поле "краткое описание". Как к нему подключить сей редактор?

    Спасибо!

    С уважением.

  17. 2014-01-31 в 07:47:17 | Сергей

    Ваще красава!! Благодарочка!!

  18. Спасибо за инфу

  19. Велике дякую!!!

    Дуже допоміг.

  20. 2014-09-29 в 23:00:35 | Андрей
    А есть ли способ уменьшить расстояние между строк при использовании символа переноса строки. По умолчанию расстояние очень большое и чтоб сделать его меньше я текст набираю сначала в обычном текстовом редакторе, а потом вставляю на сайт.
    какое расстояние имеется ввиду? Когда текст выводится на в магазине? Или в CKEditor'е в админке?

    И в админке и когда текст выводится.

    Меня тоже с давних пор интересует этот вопрос. Имеется в виду перенос при нажатии на Enter на клавиатуре,по умолчанию расстояние после нажатии на enter будто одну строку пропускает,настолько большое. В строенном редакторе как это исправить?

  21. Ребята хелп!!! поменял в config.filebrowserWindowHeight = '500' на 1500

    в строке config.resize_enabled = false поменял на true.

    после изменения этих параметров описание все равно обрезает. где копать подскажите?

Оставьте комментарий!

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Имя и сайт используются только при регистрации

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

Авторизация  Facebook. MaxSiteAuth. Loginza

(обязательно)