Fichier ckeditor.styles.js personnalisé avec module WYSIWYG

Réponses:

6

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' } },
  ]);
batigolix
la source
Je voulais vraiment que ça marche. J'ai dû utiliser un chemin complet plutôt que le chemin relatif vers le fichier stylesSet utilisé ici, sinon le wysiwyg disparaîtrait. Malgré cela, la liste déroulante Styles a ensuite été désactivée et je n'ai pas pu en déterminer la cause.
digitgopher
n'oubliez pas le $ base_url global: mycustomstyleset:$base_url/$path/ckeditor_styles.js
commonpike
@commonpike vous n'avez pas besoin$base_url
Felix Eve
4

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!

entrez la description de l'image ici

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

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

Boriana Ditcheva
la source
Où procédez-vous à l'étape 3 pour informer CKEditor du fichier ckeditor.styles.js personnalisé .
Batandwa
5
Cette réponse n'est pas correcte. La question est de savoir comment résoudre ce problème en utilisant le module Drupal Wysiwyg mais l'auteur explique comment le résoudre en utilisant le module Drupal CKEditor. Deux choses différentes. Le module Wysiwyg n'a aucune option pour ajouter des fichiers custom.styles.js supplémentaires
batigolix
4

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";
  }
}
user26794
la source
Cela devrait être la réponse !!!
Alex Gill
0

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.

digitgopher
la source
-1

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.

marbre gravé
la source
3
Cette réponse suppose également l'utilisation du module CKEDitor, ce qui n'était pas le sujet de la question
batigolix