SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 229 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

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là