Niestandardowy plik ckeditor.styles.js z modułem WYSIWYG

Próbuję dostosować menu rozwijane „Styl czcionki” w CKeditor za pomocą modułu WYSIWYG, ale nie widzę sposobu, aby określić ścieżkę do pliku ckeditor.styles.js w edytorze profilu modułu wysiwyg.

Zapoznaj się z tym postem, aby uzyskać dalsze informacje - mówi, że powinien istnieć sposób na określenie lokalizacji tego pliku.

Są 2 sposoby (z pewnością jest więcej) dodawania niestandardowych zestawów stylów ckeditora za pomocą modułu drupal wyswiwyg.

1. Korzystanie z wniesionego modułu Style Ckeditora
2. Używanie hook_wysiwyg_editor_settings_alter w następujący sposób:

(kod „zainspirowany” przez moduł ckeditor_styles)

W module niestandardowym dodaj implementację hook_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";
  }
}

i dodaj plik o nazwie ckeditor_styles.js do podkatalogu js modułu niestandardowego:

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' } },
  ]);

Cały czas robię to dla moich stron Drupal! Odpowiedź @ marblegravy jest pierwszym krokiem, ale możesz również chcieć zrobić takie rzeczy, jak dodanie odpowiednich reguł css do swojego CKEditora, tak aby edytor zastosował jeden z twoich niestandardowych stylów, edytor faktycznie je zastosował, a edytor mógł wyświetlić podgląd zmiany, bez konieczności zapisywania!

Niedawno napisałem bardzo szczegółowy post na blogu o wszystkich ruchomych częściach tutaj: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

To, co omawiam w tym samouczku, to

1. Jak dostosować pasek narzędzi

2. Tworzenie niestandardowego pliku ckeditor.styles.js. Oto próbka:

    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. Konfigurowanie CKEditora, aby wiedział, gdzie znaleźć ten plik stylów niestandardowych

4. Wdrożenie odpowiedniego css do tych stylów i powiadomienie CKEditor również o nich!

5. Jak korzystać z instalacji jako edytora!

Mam nadzieję, że to jest pomocne! Daj nam znać, jeśli to zadziała!

Właśnie napisałem mały niestandardowy moduł. Używam modułu Wysiwyg (zamiast modułu CKEditor). To następnie umożliwia załadowanie stylów z ckeditor.styles.js w moim motywie.

/**
 * 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";
  }
}

Możesz zdefiniować style w ustawieniach profilu WYSIWYG (admin / config / content / wysiwyg, edytuj żądany profil).

Karta „CSS”> „Klasy CSS”

Opcjonalnie zdefiniuj klasy CSS dla listy rozwijanej „Styl czcionki”.

Wpisz po jednej klasie w każdym wierszu w formacie: [etykieta] = [element]. [Klasa]. Przykład: Title = h1.title

Jeśli pole pozostanie puste, klasy CSS są automatycznie importowane z załadowanych arkuszy stylów. Używa ustawienia stylesSet wewnętrznie.

Wystarczy umieścić przesłonięty plik ckeditor.styles.js w katalogu głównym motywu, a następnie przejść do / admin / config / content / ckeditor / edit / , a następnie dla każdego profilu edytować je i otworzyć zestaw pól css , znaleźć W polu Predefiniowane style wybierz opcję Użyj motywu ckeditor.styles.js .

Z pomocy pola * Predefiniowany styl *:

Zdefiniuj lokalizację pliku ckeditor.styles.js. Jest używany na liście rozwijanej Styl dostępnej na domyślnym pasku narzędzi. Skopiuj plik sites / all / modules / contrib / ckeditor / ckeditor.styles.js do katalogu motywów (themes / seven / ckeditor.styles.js) i dostosuj go do swoich potrzeb.