• Главная
  • Карта сайта
Не найдено

Налаштування CKEditor для WebSphere Commerce

  1. огляд
  2. Малюнок 1. Налаштування WebSphere Commerce Management Center
  3. Використання таблиці стилів сайту вашого магазина
  4. Лістинг 1. Приклад коду для вказівки спеціальної таблиці стилів
  5. Малюнок 2. Новий шрифт CKEditor
  6. Лістинг 2. Приклад коду для додавання шрифту в config.js
  7. Лістинг 3. Приклад коду CSS шрифту
  8. Додавання спеціальних шаблонів.
  9. Лістинг 4. Приклад коду для додавання шаблону в файл config.js
  10. Малюнок 3. Вікно CKEditor Content Templates
  11. Малюнок 4. Вікно CKEditor Sample Templates

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

огляд

CKEdtior - це потужний редактор тексту HTML, призначений для спрощення створення ділового веб-контенту. Цей WYSIWYG-редактор вносить звичні функції текстового процесора прямо на веб-сторінки. Його можна налаштувати так, щоб він відповідав дизайну і конструкції сайту. Наприклад, CKEditor можна налаштувати відповідно до CSS, шрифтами і рекламними банерами, використовуваними на сайті вашого магазину. У наступних розділах ми розглянемо, як додати ці настройки:

  • використання таблиці стилів сайту вашого магазина;
  • додавання спеціальних шрифтів;
  • додавання спеціальних шаблонів.

На першому кроці ми включимо CKEditor в WebSphere® Commerce Management Center. Увійдіть в Management Center і виберіть Preferences в меню Management Center Tool. Переконайтеся, що пункт Use CKEditor відзначений, і натисніть кнопку ОК, щоб зберегти настройки.

Малюнок 1. Налаштування WebSphere Commerce Management Center
Додавання спеціальних шрифтів і шаблонів   огляд   CKEdtior - це потужний редактор тексту HTML, призначений для спрощення створення ділового веб-контенту

Тепер можна використовувати 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. Це адаптивний шаблон: якщо змінити розмір вікна, його зміст реорганізується.

Малюнок 4. Вікно CKEditor Sample Templates

Ресурси для скачування

Схожі теми

Підпишіть мене на повідомлення до коментарів

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью