SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 261 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > CKeditor > CKeditor : Configuration des styles

CKeditor : Configuration des styles

2 mai 2011 – par Frédéric Bonnaud – commentaires

6 votes

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 29 juillet 2011

Retour en haut de la page

Vos commentaires

  • Le 10 septembre 2012 à 17:28, par technoben En réponse à : CKeditor : Configuration des styles

    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.

    • Le 6 décembre 2012 à 11:58, par Petch En réponse à : CKeditor : Configuration des styles

      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.

    • Le 6 décembre 2012 à 12:15, par technoben En réponse à : CKeditor : Configuration des styles

      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

  • Le 4 octobre 2012 à 16:11, par claupe En réponse à : CKeditor : Configuration des styles

    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

  • Le 28 juillet 2011 à 21:39, par Ludo En réponse à : CKeditor : Configuration des styles

    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.

    • Le 29 juillet 2011 à 05:04, par Frédéric Bonnaud En réponse à : CKeditor : Configuration des styles

      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.

    • Le 16 avril 2012 à 14:34, par MyB En réponse à : CKeditor : Configuration des styles

      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 ;

    • Le 17 avril 2012 à 13:33, par MyB En réponse à : CKeditor : Configuration des styles

      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

  • Le 17 avril 2012 à 13:16, par MyB En réponse à : CKeditor : Configuration des styles

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

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • bigfoot

    16 juin 2015 – 56 commentaires

    Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript. Le constat de l’auteur du script : Les notes de bas de page sur le web sont une plaie. Tu dois d’abord essayer de (...)

  • SkelEditor 2.0

    1er mars 2010 – 74 commentaires

    La version remaniée et enrichie du plugin, pour SPIP 2.1, qui vous permet d’éditer votre squelette directement en ligne sans passer dans le FTP Ce plugin vous permet d’éditer les fichiers du squelette courant depuis l’interface privé. Cela peut (...)

  • CKeditor 3.0

    4 octobre 2009 – 1218 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • GIS 4

    11 août 2012 – 1344 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Menu animé déroulant

    16 août 2015 – 43 commentaires

    Barre de menu dynamique multi niveaux - adaptation aisée (?) des couleurs et dimensions - convient aussi aux petits écrans (mobiles).