Benutzerdefinierte Datei ckeditor.styles.js mit WYSIWYG-Modul

Ich versuche, die Dropdown-Liste "Schriftstil" in CKeditor über das WYSIWYG-Modul anzupassen, sehe jedoch keine Möglichkeit, einen Pfad für ckeditor.styles.js im Profileditor des wysiwyg-Moduls anzugeben.

Weitere Informationen finden Sie in diesem Beitrag. Dort sollte es eine Möglichkeit geben, einen Speicherort für diese Datei anzugeben.

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

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!

5. So verwenden Sie das Setup als Editor!

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

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

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.

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.