WWW.LIB.KNIGI-X.RU
БЕСПЛАТНАЯ  ИНТЕРНЕТ  БИБЛИОТЕКА - Электронные материалы
 

«Эта статья посвящена использованию CKEditor с WebSphere Commerce. В ней объясняется, как добавить специальные каскадные таблицы ...»

Настройка CKEditor для WebSphere Commerce

Добавление специальных шрифтов и шаблонов

Марко Делука 11.09.2015

архитектор программного обеспечения

IBM

Боско Ли

разработчик программного обеспечения WebSphere

Commerce

IBM

Эта статья посвящена использованию CKEditor с WebSphere Commerce. В ней

объясняется, как добавить специальные каскадные таблицы стилей (CSS), чтобы

контент отображался так же, как на сайте вашего магазина. В ней также описывается, как добавить к палитре специальные шрифты и адаптивные шаблоны.

Обзор CKEdtior – это мощный редактор текста HTML, предназначенный для упрощения создания делового веб-контента. Этот WYSIWYG-редактор вносит привычные функции текстового процессора прямо на веб-страницы. Его можно настроить так, чтобы он соответствовал дизайну и конструкции сайта. Например, CKEditor можно настроить в соответствии с CSS, шрифтами и рекламными баннерами, используемыми на сайте вашего магазина.

В следующих разделах мы рассмотрим, как добавить эти настройки:

• использование таблицы стилей сайта вашего магазина;

• добавление специальных шрифтов;

• добавление специальных шаблонов.

На первом шаге мы включим CKEditor в WebSphere® Commerce Management Center.

Войдите в Management Center и выберите Preferences в меню Management Center Tool.

Убедитесь, что пункт Use CKEditor отмечен, и нажмите кнопку ОК, чтобы сохранить настройки.



© Copyright IBM Corporation 2015 Торговые марки Настройка CKEditor для WebSphere Commerce Страница 1 из 9 developerWorks® ibm.com/developerWorks/ru/ Рисунок 1. Настройки WebSphere Commerce Management Center Теперь можно использовать CKEditor.

Использование таблицы стилей сайта вашего магазина Для создания согласованного контента с помощью CKEditor используйте те же базовые таблицы стилей, что и на сайте вашего магазина. По умолчанию CKEditor в WebSphere Commerce содержит таблицу стилей base.css для сайта Aurora. Имя таблицы стилей указано в конфигурации, которая хранится в таблицах базы данных EMSPOT и DMEMSPOTDEF.

Если у вас есть дополнительная специальная таблица стилей, то ее можно прописать в CKEditor.

1. Откройте файл конфигурации CKEditor для редактирования:

WCDE_DIR\workspace\LOBTools\WebContent\jsp\commerce\foundation\restricted \CKEditor.jsp

2. Найдите строку "contentsCss: [css,'/lobtools/css/ckeditor/custom.css'],.

3. Измените эту строку, как показано в Листинг 1.

Листинг 1. Пример кода для указания специальной таблицы стилей "contentsCss: [css,'/lobtools/css/ckeditor/custom.

css', '/wcsstore/Aurora/css/myStore.css'],

4. Очистите кэш веб-браузера и перезапустите WebSphere Commerce Management Center, чтобы увидеть изменения.

5. Вы изменяете файл с ограниченным доступом, поэтому может потребоваться повторно применить эти изменения при обновлении будущего продукта. Редактируя файл CKEditor.jsp, вы получаете доступ к идентификатору сайта и текущей локали, так что при необходимости можно будет указать другие таблицы стилей.

–  –  –

Добавление специальных шрифтов На вашем вебсайте может присутствовать набор шрифтов, не определенных в CKEditor по умолчанию. CKEditor позволяет легко добавлять специальные шрифты. Пример нового шрифта, добавленного в CKEditor, приведен на рисунке 2.





Рисунок 2. Новый шрифт CKEditor

1. Откройте файл конфигурации CKEditor для редактирования:

WCDE_DIR\workspace\LOBTools\WebContent\ckeditor\config.js Добавьте пример кода из Листинг 2.

Листинг 2. Пример кода для добавления шрифта в config.

js var customFonts = ['Lobster'];

var customFontNames = config.font_names;

for (var i = 0; i customFonts.length; i++){ customFontNames = customFonts[i]+';'+customFontNames;

} config.font_names = customFontNames;

2. Добавьте в CKEditor специальную таблицу стилей, как описано выше, пропишите эту таблицу стилей и откройте ее. Добавьте код, аналогичный Листинг 3, чтобы загрузить шрифт.

Листинг 3. Пример кода CSS шрифта @font-face { font-family: 'Lobster';

font-style: normal;

font-weight: 400;

src: local('Lobster'), url(//fonts.gstatic.com/s/lobster/v9/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff');

}

–  –  –

В этом примере используется шрифт Google. Чтобы сделать то же самое, перейдите на сайт шрифтов Google, выберите шрифт и нажмите на значок quick use. На вкладках standard и @import есть гиперссылка (href) на URL-адрес шрифта. Введите этот URLадрес в веб-браузер, и вы получите код, подобный приведенному в Листинг 3.

3. При указании шрифта убедитесь, что URL-адрес шрифта не зависит от протокола.

Кроме того, начните URL-адрес с //, вместо http:code или https:.

4. Очистите кэш веб-браузера и перезапустите WebSphere Commerce Management Center, чтобы увидеть изменения.

Добавление специальных шаблонов.

В этом примере показано, как добавить специальный шаблон для баннера магазина Aurora. Пример шаблона соответствует модели адаптивного веб-дизайна (RWD) Aurora.

Ваше предприятие может использовать этот шаблон для размещения новых баннеров с адаптивным веб-дизайном на своем сайте. Пример кода приведен в разделе Загрузки.

Чтобы добавить шаблон, необходимо создать изображение для демонстрации шаблона и файл конфигурации шаблона. Также нужно сообщить CKEditor о наличии нового файла шаблона.

Использование примера кода:

1. Скопируйте файл template4.gif в каталог:

WCDE_DIR\workspace\LOBTools\WebContent\ckeditor\plugins\templates\templates \images\

2. Скопируйте файл mytemplates.js в каталог:

WCDE_DIR\workspace\LOBTools\WebContent\ckeditor\ Этот файл содержит HTML-разметку шаблона.

3. Откройте файл конфигурации CKEditor для редактирования:

WCDE_DIR\workspace\LOBTools\WebContent\ckeditor\config.js Добавьте пример кода из Листинг 2.

Листинг 4. Пример кода для добавления шаблона в файл config.

js config.templates_files = [ '/lobtools/ckeditor/plugins/templates/templates/default.js', '/lobtools/ckeditor/mytemplates.js' ];

config.templates = 'custom,default';

4. Если ваш шаблон содержит изображения и CSS, как в этом примере, эти файлы нужно скопировать в папку Stores. Скопируйте примеры из template/sample-template/ в каталог:

WCDE_DIR\workspace\Stores\WebContent\Aurora\rwdWebAssets\template1

5. Закройте WebSphere Commerce Management Center и очистите кэш веб-браузера.

Затем войдите в WebSphere Commerce Management Center и откройте вкладку Marketing.

Создайте новый Content и нажмите на значок карандаша над полем Text, чтобы открыть

–  –  –

CKEditor. Откройте окно Content Templates, щелкнув на значке Templates, как показано на рисунке 3. Появится новый шаблон.

Рисунок 3. Окно CKEditor Content Templates При выборе нового шаблона CKEditor заполняет CKEditor контентом, как показано на рисунке 4.

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

–  –  –

Ресурсы Научиться

• Оригинал статьи: Customizing CKEditor with WebSphere Commerce.

• Подробнее об CKEdtior.

• Подробнее о WebSphere Commerce 7.0 – в документации WebSphere Commerce Knowledge Center.

• Будьте в курсе технических мероприятий и Web-трансляций developerWorks, посвященных самым разнообразным продуктам IBM и вопросам ИТ-отрасли.

• Посетите бесплатный семинар developerWorks Live!, чтобы быстро познакомиться с продуктами и инструментами IBM, а также тенденциями в ИТ-отрасли.

• Смотрите демонстрации developerWorks по требованию, от установки и настройки продуктов для начинающих до тонкостей для опытных разработчиков.

• Следите за developerWorks® в Твиттере.

Получить продукты и технологии

• Загрузить WebSphere Commerce.

• Загрузить DB2 Express-C.

Обсудить

• Примите участие в деятельности сообщества пользователей WebSphere Commerce.

–  –  –

Об авторах Марко Делука Марко Делука (Marco Deluca) — архитектор программного обеспечения в группе разработки WebSphere Commerce лаборатории IBM Toronto Lab (Канада). Он имеет более чем 10-летний опыт углубленной разработки корпоративного программного обеспечения. В настоящее время Марко специализируется на архитектуре, проектировании и разработке решений для WebSphere Commerce.

Боско Ли Боско Ли (Bosco Li) - архитектор ПО в группе разработки WebSphere Commerce при лаборатории IBM в Торонто. Работает в группе над многочисленными решениями более 10 лет. Кроме того, отвечает за соответствие программного обеспечения стандартам доступности.

© Copyright IBM Corporation 2015 (www.ibm.com/legal/copytrade.shtml) Торговые марки (www.ibm.com/developerworks/ru/ibm/trademarks/)

Похожие работы:

«IS S N 0002-3272 О.П.ЯРОШЕНКО Л.П.ГОЛУБЕВА И.З.КАЛАНТАР МИОСПОРЫ И СТРАТИГРАФИЯ НИЖНЕГО ТРИАСА ПЕЧОРСКОЙ СИНЕКЛИЗЫ А К А Д Е М И Я НАУК СССР ОРДЕНА ТРУДОВОГО КРАСНОГО ЗНАМЕНИ ГЕОЛОГИЧЕСКИЙ ИНСТИТУТ О.П. ЯРОШЕНКО Л.П. ГОЛУБЕВА И.З. КАЛАНТАР МИОСПОРЫ И СТРАТИГРАФИЯ НИЖНЕГО ТРИАСА ПЕЧОРСКОЙ СИНЕКЛИЗЫ Труды, вып. 470 Основаны...»

«ПОЛОЖЕНИЕ О КОНКУРСЕ Автономной некоммерческой организации "Организационный комитет "Россия – 2018"1. Общие положения В целях обеспечения высокого качества организации и проведения Чемпионата мира по футболу FIFA 2018...»

«Автоматизированная копия 586_311730 ВЫСШИЙ АРБИТРАЖНЫЙ СУД РОССИЙСКОЙ ФЕДЕРАЦИИ ПОСТАНОВЛЕНИЕ Президиума Высшего Арбитражного Суда Российской Федерации № 7677/11 Москва 22 ноября 2011 г. Президиум Высшего Арбитражного Суда Российской Федерации в составе: председательствующего – Председателя Высшего Арбитражного Суда Российс...»

«Российская академия наук Институт озероведения РАН Биоиндикация в мониторинге пресноводных экосистем II Bioindication in monitoring of freshwater ecosystems II Издательство "Любавич" Санкт-Петербург УДК 504.064.36 Ответс...»

«ПРИМЕНЕНИЕ СПИР ДЛЯ ОБОСНОВАНИЯ ПРОЧНОСТИ И ОПРЕДЕЛЕНИЯ НЕСУЩЕЙ СПОСОБНОСТИ ОПОРНОЙ КОНСТРУКЦИИ РЕАКТОРА ВВЭРБЛОКА КОЛЬСКОЙ АЭС Руководитель: Л.А.Лякишев Автор: С.А.Фризен Введение...»

«Обзор рынка потребления угля в России Москва январь, 2015 Обзор рынка потребления угля в России Демонстрационная версия С условиями приобретения полной версии отчета можно ознакомиться на странице сайта по адресу: http://www.infomine.ru/re...»

«ПРОФЕССИИ Е.Вовк Адвокат: профессия и профессиональная этика в обыденных представлениях двокат – относительно новый персонаж в современной российской куль А туре. Конечно, дореволюционная Россия могла гордиться сильной юри дической школой и целой плеядой юристов с мировым именем. Но за тем в течение долгого времени роль адвокатов в системе судопроиз...»

«Абодуллоева С.Ю. Этнонимические названия в "Маснави-йи Ма`нави" Джалал ад-Дина Руми УДК 821.222.8(Т)-1 ББК 81(Т)+86.3 Абодуллоева Сафина Юсуповна, ЭТНОНИМИЧЕСКИЕ НАЗВАНИЯ докторант, к.ф.н., доцент кафедры В "МАСНАВИ-ЙИ МА`НАВИ" таджикского языка Хорогского ДЖАЛАЛ АД-ДИ...»








 
2017 www.lib.knigi-x.ru - «Бесплатная электронная библиотека - электронные материалы»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.