Спеціальний файл ckeditor.styles.js з модулем WYSIWYG

Я намагаюся налаштувати спадовий список "Стиль шрифту" в CKeditor через модуль WYSIWYG, але я не бачу способу вказати шлях до ckeditor.styles.js в редакторі профілю модуля wysiwyg.

Щоб отримати детальну інформацію, зверніться до цієї публікації - там написано, що має бути спосіб вказати місце для цього файлу.

Це два способи (звичайно, є більше) для додавання наборів наборів стилів ckeditor за допомогою модуля drupal wyswiwyg.

1. Використання внесеного модуля Стилі Ckeditor
2. Використовуючи гачку_wysiwyg_editor_settings_alter наступним чином:

(код "натхненний" модулем ckeditor_styles)

У користувальницький модуль додайте реалізацію mock_wysiwyg_editor_settings_alter:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 *
 * @param type $settings
 * @param type $context
 */
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']->editor == 'ckeditor') {
    $format = $context['profile']->format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";
  }
}

і додайте файл з ім'ям ckeditor_styles.js у підкаталог js спеціального модуля:

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  ]);

Я роблю це для своїх Drupal-сайтів постійно! @ marblegravy відповідь - це перший крок, але ви також можете зробити такі дії, як додати відповідні правила css до свого CKEditor, так що коли ваш редактор застосовує один із ваших власних стилів, редактор фактично застосовує їх, і редактор може переглянути попередній зміни, не економлячи!

Нещодавно я написав дуже детальну публікацію в блозі про всі рухомі частини тут: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Те, що я висвітлюю в підручнику, це

1. Як налаштувати панель інструментів

2. Створення користувацького файлу ckeditor.styles.js. Ось зразок:

    CKEDITOR.addStylesSet( 'drupal',
    [
    /* Block Styles */
    { name : 'Heading 2'        , element : 'h2' },
    { name : 'Heading 3'        , element : 'h3' },
    { name : 'Heading 4'        , element : 'h4' },
    { name : 'Paragraph'        , element : 'p' },
    { name : 'Blue Image Button',
    element : 'div',
    attributes : {
    'class' : 'blue-image-button' }
    },
   
    /* Inline Styles */
    { name : 'Inline Quotation'    , element : 'q' },
     ...

3. Налаштування вашого CKEditor, щоб він знав, де знайти цей спеціальний файл стилів

4. Реалізація відповідного css для цих стилів та інформування CKEditor про них теж!

5. Як використовувати налаштування як редактор!

Сподіваюся, що це корисно! Повідомте нас, якщо ви працюєте з цим!

Я тільки що написав крихітний модуль. Я використовую модуль Wysiwyg (а не модуль CKEditor). Потім це дозволяє завантажувати стилі з ckeditor.styles.js у моїй темі.

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $path = drupal_get_path('theme', 'THEMENAME');
    $settings['stylesSet'] = "drupal:/$path/ckeditor.styles.js";
  }
}

Ви можете визначити стилі в налаштуваннях профілю WYSIWYG (admin / config / content / wysiwyg, відредагуйте потрібний профіль).

Вкладка "CSS"> "CSS-класи"

За бажанням визначте класи CSS для випадаючого списку "Стиль шрифту".

Введіть один клас у кожному рядку у форматі: [label] = [елемент]. [Class]. Приклад: Назва = h1.title

Якщо залишити порожнім, класи CSS автоматично імпортуються із завантажених таблиць стилів. Використовує внутрішньо налаштування стилів .

Просто покладіть перекреслений файл ckeditor.styles.js у корінь вашої теми, потім перейдіть до / admin / config / content / ckeditor / edit / , потім для кожного свого профілю відредагуйте їх та відкрийте набір полей css , знайдіть Поле заздалегідь визначені стилі та оберіть Використовувати тему ckeditor.styles.js .

Довідка з поля * Заздалегідь визначений стиль *:

Визначте розташування файлу ckeditor.styles.js. Він використовується в спадному списку Стиль, доступному на панелі інструментів за замовчуванням. Скопіюйте файл сайтів / всіх / модулів / contrib / ckeditor / ckeditor.styles.js у свій тематичний каталог (теми / сім / ckeditor.styles.js) та відрегулюйте його під свої потреби.