web-dev-qa-db-fra.com

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 dit qu'il devrait y avoir un moyen de spécifier un emplacement pour ce fichier.

themingwysiwyg
9
jakew

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

  1. Utiliser le module contribué Ckeditor Styles
  2. Utiliser 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' } },
  ]);
6
batigolix

Je le fais pour mes 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 l'éditeur applique l'un de vos styles personnalisés, l'éditeur les applique réellement et l'éditeur peut prévisualiser les modifications, 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!

enter image description here

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

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

4
Boriana Ditcheva

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

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.

0
digitgopher