SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 193 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 ?
  • [Se connecter]

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

  • Champs Extras 3

    16 janvier 2012 – 563 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 241 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Moulinette

    17 juillet 2015 – 34 commentaires

    Un squelette qui monte et qui descend ! Moulinette est un squelette basé sur le thème Grayscale (documentation) pour Bootstrap 3. Le type de site attendu est un site en une seule page : une rubrique avec quelques articles, des titres courts, des (...)

  • Formulaire de contact avancé

    23 mars 2009 – 1372 commentaires

    Un formulaire de contact configurable, avec de multiples options.

  • Plugin « Agrandir la largeur de page »

    3 août 2015 – 21 commentaires

    Ce plugin permet d’agrandir la largeur de la page dans l’espace privé de SPIP. Vous pourrez personnaliser cette largeur si besoin. Préambule Dans l’espace privé de SPIP, lorsque nous sommes connectés, nous pouvons choisir dans nos préférences (...)