Benutzerdefinierte Datei ckeditor.styles.js mit WYSIWYG-Modul

Antworten:

6

Dies sind zwei Möglichkeiten (es gibt sicherlich noch mehr), um benutzerdefinierte ckeditor-Stylesets mithilfe des Drupal-Moduls wyswiwyg hinzuzufügen.

  1. Verwenden des bereitgestellten Moduls Ckeditor Styles
  2. Verwenden Sie hook_wysiwyg_editor_settings_alter wie folgt:

(Code "inspiriert" vom Modul ckeditor_styles)

Fügen Sie in einem benutzerdefinierten Modul die Implementierung hook_wysiwyg_editor_settings_alter hinzu:

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

und fügen Sie eine Datei mit dem Namen ckeditor_styles.js in ein Unterverzeichnis js des benutzerdefinierten Moduls ein:

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
quelle
Ich wollte wirklich, dass das funktioniert. Ich musste einen vollständigen Pfad anstelle des relativen Pfads zur hier verwendeten stylesSet-Datei verwenden, sonst würde das wysiwyg verschwinden. Trotzdem wurde das Dropdown-Menü "Stile" deaktiviert, und ich konnte die Ursache nicht herausfinden.
Digitgopher
Vergessen Sie nicht die globale $ base_url: mycustomstyleset:$base_url/$path/ckeditor_styles.js
commonpike
@commonpike brauchst du nicht$base_url
Felix Eve
4

Ich mache das die ganze Zeit für meine Drupal-Sites! Die Antwort von @ marblegravy ist ein erster Schritt, aber Sie können Ihrem CKEditor auch entsprechende CSS-Regeln hinzufügen, damit der Editor diese anwendet und der Editor eine Vorschau der Stile anzeigen kann, wenn Ihr Editor einen Ihrer benutzerdefinierten Stile anwendet Änderungen, ohne speichern zu müssen!

Ich habe kürzlich einen sehr detaillierten Blog-Beitrag über alle beweglichen Teile hier geschrieben: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Was ich im Tutorial behandle, ist

  1. So passen Sie die Symbolleiste an
  2. Erstellen der benutzerdefinierten Datei ckeditor.styles.js. Hier ist ein Beispiel:

     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. Konfigurieren Sie Ihren CKEditor so, dass er weiß, wo sich diese benutzerdefinierte Stildatei befindet

  4. Implementieren Sie das entsprechende CSS für diese Stile und informieren Sie CKEditor auch darüber!

Geben Sie hier die Bildbeschreibung ein

  1. So verwenden Sie das Setup als Editor!

Hoffe es ist hilfreich! Lassen Sie uns wissen, wenn Sie dies zum Laufen bringen!

Boriana Ditcheva
quelle
Wo machen Sie Schritt 3, um CKEditor über die benutzerdefinierte Datei ckeditor.styles.js zu informieren?
Batandwa
5
Diese Antwort ist nicht korrekt. Die Frage ist, wie dies mit dem Drupal Wysiwyg-Modul gelöst werden kann. Der Autor erklärt jedoch, wie dies mit dem Drupal CKEditor-Modul gelöst werden kann. Zwei verschiedene Dinge. Das Wysiwyg-Modul hat keine Option, zusätzliche custom.styles.js-Dateien hinzuzufügen
batigolix
4

Ich habe gerade ein kleines benutzerdefiniertes Modul geschrieben. Ich verwende das Wysiwyg-Modul (anstelle des CKEditor-Moduls). Dadurch können Stile aus ckeditor.styles.js in meinem Design geladen werden.

/**
 * 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";
  }
}
user26794
quelle
Das sollte die Antwort sein !!!
Alex Gill
0

Sie können Stile in den WYSIWYG-Profileinstellungen definieren (admin / config / content / wysiwyg, bearbeiten Sie das gewünschte Profil).

Registerkarte "CSS"> "CSS-Klassen"

Definieren Sie optional CSS-Klassen für die Dropdown-Liste "Schriftstil".

Geben Sie in jeder Zeile eine Klasse im Format ein: [label] = [element]. [Class]. Beispiel: Titel = h1.title

Wenn Sie dieses Feld leer lassen, werden CSS-Klassen automatisch aus geladenen Stylesheets importiert. Verwendet die StylesSet- Einstellung intern.

Digitgopher
quelle
-1

Setzen Sie Ihre überschriebene nur ckeditor.styles.js Datei im Root Ihres Themas, dann gehen Sie zu / admin / config / content / ckeditor / edit / , dann für jedes Ihrer Profile, bearbeiten sie und öffnen Sie die CSS Fieldset, finden die Feld Vordefinierte Stile und wählen Sie Thema verwenden ckeditor.styles.js .

In der Feldhilfe des * vordefinierten Stils *:

Definieren Sie den Speicherort der Datei ckeditor.styles.js. Es wird von der Dropdown-Liste Stil verwendet, die in der Standardsymbolleiste verfügbar ist. Kopieren Sie die Datei sites / all / modules / contrib / ckeditor / ckeditor.styles.js in Ihr Themenverzeichnis (theme / sieben / ckeditor.styles.js) und passen Sie sie an Ihre Bedürfnisse an.

Marmorsoße
quelle
3
Diese Antwort setzt auch die Verwendung des CKEDitor-Moduls voraus, worum es bei der Frage nicht ging
Batigolix