web-dev-qa-db-fra.com

Ajout de classes CSS à wysiwyg

J'utilise wysiwyg avec ckeditor et je me demandais comment ajouter des styles css pour qu'un utilisateur puisse, par exemple, faire flotter des images vers la gauche ou apporter d'autres modifications similaires ...?

Merci!

7
Jane

Ckeditor utilise le ckeditor.styles.js fichier pour définir les styles disponibles dans la liste déroulante Styles. La documentation dans ce fichier indique:

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

Si vous regardez le fichier, il devrait être assez simple de le modifier en utilisant les exemples donnés.

Le ckeditor.styles.js le fichier peut être copié dans un répertoire accessible par Drupal et modifié pour inclure vos styles. Ensuite, vous devez configurer votre profil CKeditor pour pointer vers le nouveau fichier, y compris tout CSS applicable.

6
nmc

Au lieu de vous connecter à ckeditor.styles.js, on peut le faire directement sur la page de configuration du Format.

Le format WYSIWYG vous donne une option pour vos propres styles et nous pouvons simplement écrire des CSS sur la base de ces formats.

Étapes pour ajouter des styles

  • Connectez-vous sur le site en tant qu'administrateur.
  • Accédez à la page de configuration des formats. (Configuration "Création de contenu" Profils Wysiwyg)

    enter image description here

  • Modifiez l'un des formats.

    enter image description here

  • Ouvrez le CSS fieldset.

    enter image description here

  • Sous classes CSS zone de texte, créez le style que vous souhaitez créer. Le format devrait être

Nom du style = html_element.class_name

Un exemple de la même chose est

Titre de la page statique = div.static_page_title (Le nom du style est donc Titre de la page statique, qui, une fois appliqué, enveloppera le texte dans div en ajoutant static_page_title comme classe de l'élément div.)

Étapes pour l'utiliser

  • Essayez de créer un contenu et utilisez le format dans lequel vous avez ajouté le style.
  • Sous Styles, vous verriez les paramètres de style que vous avez créés. enter image description here
  • Écrivez simplement le test et sélectionnez le style. Après cela, le balisage ressemblerait à quelque chose comme

    <div class="static_page_title">Testing</div>

  • Nous pouvons donc simplement écrire le css pour la classe static_page_title et tout fonctionnerait comme prévu.

J'espère que ma réponse serait utile

1
Nitesh Sethia