CKeditor : Configuration des styles

Cet article aborde les possibilités de configuration élaborées du plugin : les styles, les couleurs et les polices de caractères.

Attention, ce sont ces possibilités qui pourront détruire ou préserver la charte graphique de votre site. Tout sera question de dosage.

Onglet : Configuration des styles

Le titre de l’onglet est un peu réducteur puisque dans cet onglet on peut configurer tous les enrichissements sophistiqués.

Liste des tags HTML présents dans le « combo/menu déroulant formats » :

CKeditor permet de présenter dans un menu déroulant (un combo) une liste de balises qui seront proposé comme enrichissement pour vos textes.

Le texte qui sera enrichi avec ces balises sera de la forme : <balise class="ckspip">. Si vous voulez changer la classe de balise, il suffit d’entrer la classe que vous désirez dans le champ suivant :

Classe CSS des éléments insérés par le menu déroulants formats

Exemple :

h3 ; h4 ; h5 ; h6 ; pre ; blockquote

Styles : cette option permet de configurer précisément les styles qui seront proposés par CKeditor.

Pour définir un style, il faut respecter la syntaxe :

NOM : element.class { css }

Dans lequel :

  • NOM est n’importe quelle chaine de caratères, c’est le nom qui s’affichera dans CKEditor,
  • element est un élément HTML (strong, em, span, et c...), la sélection à laquelle vous appliquerez ce styles sera dans un bloc HTML du type de cet élément,
  • class (facultatif) est un nom de classe CSS à définir dans votre feuille de style,
  • css (facultatif) est du code CSS valide.

Par exemple, pour obtenir le menu déroulant :

vous pouvez entrez :

Ce qui vous définira les 2 styles : Titre 1 et Titre 2

Aucun test n’est fait, une erreur peut faire planter le javascript généré et empêcher l’éditeur de s’afficher.

Configuration des couleurs : Cette option vous permet de choisir les couleurs qui seront présentés dans les deux menus déroulants : couleur de l’avant plan et couleur de l’arrière plan. Ceci peut permettre d’utiliser des couleurs (et donc satisfaire vos rédacteurs en mal de couleurs) tout en préservant l’unité graphique de vote site.

Les couleurs doivent être entrées au format : rvb ou rrvvbb (sans le # habituel, où r, v et b sont des chiffres compris entre 0 et f.).

Exemple de palette de couleurs :

999 333 939 993 399 339 933 393

L’option autoriser d’autres couleurs permet de laisser la possibilité de choisir une couleur qui n’est pas dans la palette (que ce soit la palette par défaut, ou celle que vous avez défini) et donc de laisser vos rédacteurs faire n’importe quoi ...

Configuration des polices

Attention : ceci permet probablement de saccager la belle charte graphique de votre site. Mais aussi de laisser une plus grande liberté graphique à vos rédacteurs. À vous de trouver le bon compromis

Les dernières version du pugin permettent d’utiliser des polices de caractères en utilisant la propriété @font-face. On peut utiliser :

  • soit des polices du Google Web Directory,
  • soit des packs de polices contenant les fichiers de polices ( .eot, .ttf, .woff et .svg) ainsi que la feuille de style contenant les directives @font-face.

Pour utiliser des polices du Google Web Directory, il suffit de lister les noms des polices à utiliser.

Par exemple :

Goudy Bookletter 1911 ; Dancing Script ; Vibur

Pour utiliser des packs, il faut créer un dossier FontKits dans le dossier IMG/, et y déposer les packs sous la forme d’un dossier par pack. Le plugin se chargera de trouver les polices à insérer.

Par exemple, pour utiliser la police Kingthings Foundation, vous aurez l’arboressence :

/votre/repertoire/de/spip/IMG/FontKits/
└── Kingthings-Foundation/
      ├── demo.html
      ├── Kingthings_Foundation-webfont.eot
      ├── Kingthings_Foundation-webfont.svg
      ├── Kingthings_Foundation-webfont.ttf
      ├── Kingthings_Foundation-webfont.woff
      ├── Kingthings License.txt
      └── stylesheet.css

Pour que les polices soient visualisables sur votre site, il faut que vous insériez une feuille de style CSS. Soit vous modifiez vos squelettes, soit vous laissez le plugin gérer cela (en partie publique et aussi en partie privée)

Dernière modification de cette page le 9 février 2019

Discussion

4 discussions

  • 2

    Bonjour,
    Tout d’abord bravo et merci pour le travail deportage de ce plugin sous spip 3.

    Apres instal et tests d’un spip 3.0.4, je rencontre quelques problèmes sur le plugin avec la fonction « inserer un lien spip » qui ne me génère pas la liste des articles et/ou rubriques.
    Je ne sais pas trop si cela vient du plugin ou d’une mauvais manip et/ou config de ma part ?

    La seconde difficulté vient du paramétrage des styles. Je ne parviens pas à faire apparaiter de style dans la liste déroulante du plugin. J’ai tenté de modifier l’onglet styles (dans la config du plugin) avec les infos suivantes :
    Titre 1 : h3 font-weight : bold ; color : blue ;
    Titre 2 : h4 font-weight : bold ; color : red ;
    mais les modifs ne sont pas prises en compte.

    Si quelqu’un à une idée ou une solution.
    Merci par avance.
    Bonne fin de journée.

    • J’ai le même soucis que toi concernant les liens spip dans les articles, je ne parviens pas a faire de liens interne, c très embêtant, si tu as trouvé une solution, j’aimerais la connaitre ;-).

      par contre, concernant le soucis des styles, il suffit de créé une balise span, je t’indique la ligne à ajouter :
      Titre 1 : span font-weight : bold ; color : blue ;
      Titre 2 : span font-weight : bold ; color : red ;

      voila, merci d’avance, Petch.

    • Oui bonjour, en fait, pour moi, ça marche en distant sur le site mais pas en local sous Wampserver.
      Bonne continuation

    Répondre à ce message

  • SPIP2.1.2 - ckeditor 3.6 - sarkaspip 3.0.8

    A Frédéric Bonnaud

    J’utilise avec bonheur Ckeditor pour spip depuis plus d’un an et demi. Un grand merci à Fred et à tous ceux qui contribuent à le mettre au point.

    Je soulève une petite question : sauf erreur de ma part, dans la configuration de ckeditor, il n’est pas possible de définir la police par défaut qui s’appliquerait nativement au texte saisi.
    En ce qui me concerne, la police par défaut de ckeditor est Times new roman, après enregistrement dans la partie privée elle s’affiche en Verdana et sur le site public en Helvetica.

    Je souhaiterais que ckeditor soit par défaut en Helvetica pour que l’affichage soit le même à la saisie et sur le site public. Ne serait-il pas possible d’ajouter ce paramètre dans la fenêtre « styles » de la configuration ?

    J’ai passé beaucoup de temps à chercher dans les fichiers du plugin sans trouver de réponse à cette question.

    Merci pour la réponse.

    Répondre à ce message

  • 3

    Merci pour cet article,

    Mais c’est la première fois que j’utilise CKeditor, et je suis confus avec cette partie de code :

    Titre 1 : h3 { font-weight: bold ; color: blue; text-decoration : underline ; }
    Titre 2 : h4 { font-weight: bold ; color: blue; text-decoration : none ; }

    Est-ce dans notre feuille de style CSS que l’on doit mettre ca ? Car ca fonctionne pas sur mon site. Le style Titre 1 et Titre 2 n’apparaît pas dans l’éditeur d’article CKeditor. Ou alors faut-il le mettre dans un css propre à CKeditor ?

    Ou faut-il encore faire quelque chose de plus ? Genre appeler un script en plus ?

    Merci.

    • Non, c’est une option du plugin ckeditor.

      Ça se configure comme toutes les options du plugin via CFG.

      Il n’y a rien à faire de plus que d’entrer ce code dans le textarea de l’option idoine.

    • Bonjour Fred

      J’ai beau faire, à l’utilisation, le choix styles est toujours vide. (En test local avec wampserver)
      CKEditor pour SPIP 0.15 - ckeditor v 3.6 L’onglet styles configuré avec :
      Intertitre : h1 font-size:13pt ; text-align : center ; color:blue ;
      Titre1 : h1 font-size : 12pt ; color:blue ;
      Titre2 : h2 font-size : 11pt ; color:blue ;
      Titre3 : h3 font-size : 10pt ; color:blue ;
      Blocdivcenter : div background : none ; text-align : center ; clear : both ;
      Blocdivgauche : div.blocdivleft background : none ; text-align : left ;
      Blocdivdroit : div.blocdivright background : none ; text-align : right ;

    • Pardon pour le message inutile en haut.

      Bon les accolades sont bien présentes comme ne le montre pas mon exemple.
      ET
      Ca marche en distant sur le site mais pas en local sous Wampserver.
      Merci
      MyB

    Répondre à ce message

  • Bien sur, les accolades sont là ou il faut !!

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom