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

Odpowiedzi:

5

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' } },
  ]);
batigolix
źródło
Naprawdę chciałem, żeby to zadziałało. Musiałem użyć pełnej ścieżki zamiast ścieżki względnej do użytego tutaj pliku stylesSet, inaczej wysiwyg zniknie. Mimo to menu rozwijane Style zostało wyłączone i nie mogłem znaleźć przyczyny.
digitgopher
nie zapomnij o globalnym $ base_url: mycustomstyleset:$base_url/$path/ckeditor_styles.js
commonpike
@commonpike nie potrzebujesz$base_url
Felix Eve
4

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!

wprowadź opis zdjęcia tutaj

  1. Jak korzystać z instalacji jako edytora!

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

Boriana Ditcheva
źródło
Gdzie robisz krok 3, informując CKEditor o niestandardowym pliku ckeditor.styles.js .
Batandwa
5
Ta odpowiedź jest nieprawidłowa. Pytanie dotyczy tego, jak rozwiązać ten problem za pomocą modułu Drupal Wysiwyg, ale autor wyjaśnia, jak rozwiązać ten problem za pomocą modułu Drupal CKEditor. Dwie różne rzeczy. Moduł Wysiwyg nie ma opcji dodawania dodatkowych plików
custom.styles.js
3

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";
  }
}
użytkownik26794
źródło
To powinna być odpowiedź !!!
Alex Gill,
0

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.

digitgopher
źródło
-1

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.

marmurkowaty
źródło
3
Ta odpowiedź zakłada również użycie modułu CKEDitor, co nie było tym pytaniem
batigolix