Fichier ckeditor.styles.js personnalisé avec module WYSIWYG

J'essaie de personnaliser la liste déroulante "Style de police" dans CKeditor via le module WYSIWYG, mais je ne vois aucun moyen de spécifier un chemin pour ckeditor.styles.js dans l'éditeur de profil du module wysiwyg.

Reportez-vous à ce message pour plus d'informations - il indique qu'il devrait y avoir un moyen de spécifier un emplacement pour ce fichier.

Ce sont 2 façons (il y en a certainement plus) d'ajouter des jeux de styles ckeditor personnalisés en utilisant le module drupal wyswiwyg.

1. Utilisation du module contribué Ckeditor Styles
2. Utilisation de hook_wysiwyg_editor_settings_alter comme suit:

(code "inspiré" par le module ckeditor_styles)

Dans un module personnalisé, ajoutez l'implémentation 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";
  }
}

et ajoutez un fichier nommé ckeditor_styles.js dans un sous-répertoire js du module personnalisé:

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

Je fais ça pour mes sites Drupal tout le temps! La réponse de @ marbregravy est une première étape, mais vous pouvez également vouloir faire des choses comme ajouter des règles CSS correspondantes à votre CKEditor, de sorte que lorsque votre éditeur applique l'un de vos styles personnalisés, l'éditeur les applique réellement et l'éditeur peut prévisualiser le changements, sans avoir à enregistrer!

J'ai récemment écrit un article de blog très détaillé sur toutes les pièces mobiles ici: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Ce que je couvre dans le tutoriel est

1. Comment personnaliser la barre d'outils

2. Création du fichier ckeditor.styles.js personnalisé. Voici un exemple:

    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. Configuration de votre CKEditor pour qu'il sache où trouver ce fichier de styles personnalisés

4. Implémenter le CSS correspondant à ces styles, et en informer CKEditor!

5. Comment utiliser la configuration en tant qu'éditeur!

J'espère que c'est utile! Faites-nous savoir si vous réussissez!

Je viens d'écrire un petit module personnalisé. J'utilise le module Wysiwyg (plutôt que le module CKEditor). Cela permet ensuite de charger les styles de ckeditor.styles.js dans mon thème.

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

Vous pouvez définir des styles dans les paramètres du profil WYSIWYG (admin / config / content / wysiwyg, modifier le profil souhaité).

Onglet "CSS"> "Classes CSS"

Définissez éventuellement des classes CSS pour la liste déroulante "Style de police".

Entrez une classe sur chaque ligne au format: [étiquette] = [élément]. [Classe]. Exemple: Title = h1.title

Si elles ne sont pas renseignées, les classes CSS sont automatiquement importées à partir des feuilles de style chargées. Utilise le paramètre stylesSet en interne.

Placez simplement votre fichier ckeditor.styles.js substitué à la racine de votre thème, puis accédez à / admin / config / content / ckeditor / edit / , puis pour chacun de vos profils, modifiez- les et ouvrez le jeu de champs css , trouvez le Champ Styles prédéfinis et choisissez Utiliser le thème ckeditor.styles.js .

Dans l' aide du champ * Style prédéfini *:

Définissez l'emplacement du fichier ckeditor.styles.js. Il est utilisé par la liste déroulante Style disponible dans la barre d'outils par défaut. Copiez le fichier sites / all / modules / contrib / ckeditor / ckeditor.styles.js dans votre répertoire de thèmes (themes / seven / ckeditor.styles.js) et adaptez-le à vos besoins.