CKEditor et les modèles SPIP

Le plugin CKEditor pour SPIP permet d’utiliser les modèles SPIP sans que le rédacteur ait à en connaître la syntaxe précise.

Ceci nécessite toute fois une configuration importante de la part de l’administrateur qui, lui, doit connaître la syntaxe et l’utilisation précise de ces modèles.

Les modèles SPIP sont très différents les uns des autres. On a, par exemple :

  • des modèles qui n’ont pas de balise fermante (comme par exemple la balise : <img>)
  • des modèles qui ont une balise fermantes (comme par exemple la balise : <cadre>...</cadre>)
  • des modèles dont les paramètres utilisent une syntaxe avec le pipe (comme par exemple la balise : <imgXX|left>)
  • des modèles dont les paramètre utilisent une syntaxe html (comme par exemple la balise : <cadre class="javascript">...</cadre>)

Configuration

CKEditor étant un éditeur WYSIWYG, le plugin CKEditor pour SPIP se devait de permettre d’utiliser ces balises sans en connaître les particularités.

Pour cela, l’administrateur doit utiliser l’onglet « Configuration des modèles SPIP »

Tout commence par la création d’un « Nouveau modèle », SPIP demande alors le nom du modèle, il faut que ce soit le nom de la balise que l’administrateur compte permettre à ses rédacteurs d’utiliser dans CKEditor, par exemple : cadre pour utiliser le modèle SPIP <cadre>.

Ce modèle sera disponible dans CKEditor via une liste déroulante, l’administrateur doit préciser comment apparaîtra ce modèle dans la liste. C’est l’objet des deux champs :

  • « Intitulé dans la liste déroulante »,
  • « Description du modèle » (c’est à dire, le contenu de la bulle d’aide).

Ensuite, il doit indiquer si le modèle est numérique. Par exemple, pour une image, on précisera : modèle « numérique », puis que cette valeur représente « un document ». De cette façon le plugin, proposera une liste des identifiants des documents SPIP (avec leur nom).

Enfin, on précise si le modèle est un modèle à balise fermantes. Comme les modèles à balises fermantes ont un contenu, et que ce contenu sera interprété par SPIP lors de la réédition du texte [1], il faut préciser au plugin si on doit protéger le contenu de cette interprétation en protégeant certains caractères (le plus simple est de protéger : {}[].

Reste à configurer la façon dont devront être gérés les paramètres des modèles.

Paramètres des modèles

La première chose à configurer, c’est la syntaxe avec laquelle ces paramètres devront être insérés par le plugin :

  • soit la syntaxe spip, exemple : <sjcycle16|center|docs=101,102,103,104|id_diapo=1>,
  • soit la syntaxe html, exemple : <cadre class="spip">...</cadre>

Le plugin permet ensuite de configurer des listes de paramètres sélectionnables que le rédacteur pourra utiliser au lieu de connaître tous les paramètres de la balise.

Il suffit d’ajouter à la liste tous les paramètres que l’administrateur souhaite proposer à ses rédacteurs. Puis pour chaque paramètre, il faut indiquer la listes des valeurs qui peuvent être documentées pour les rédacteurs. Il suffit donc d’ajouter chaque valeur, puis l’intitulé sous lequel cette valeur apparaîtra dans la liste déroulante proposant les valeurs.

Exemples :

Un bon (espérons-le) dessin valant mieux qu’un long discours ...
Le modèle <cadre>
Dans la configuration vous entrez :

Ce qui permet d’obtenir dans la barre d’outils de CKeditor :

Puis, la boite de dialogue suivante :

PS : les dernières versions ont une interface de configuration légèrement différente.

Notes

[1le contenu de la zone d’édition passe par le filtre propre avant d’être passé à CKEditor

Discussion

6 discussions

  • Alexandre

    Bonjour,

    je rencontre des soucis avec les plugins ckeditor et insérer modèles.

    1) En passant par le bouton du ckeditor, lorsque j’insère un modèle, il intègre bien dans le mode « visuel », à l’endroit du curseur, mais les balises ne sont pas interprétées. Ainsi dans l’article, apparait < doc44 >.

    2) En passant par la colonne de gauche, « insérer un modèle » puis « un document », le code est bien inséré, mais :
    a) quelque soit la position du curseur dans le ckeditor auparavant, le code est inséré au début de l’article
    b) le code n’est pas du tout interprété après l’insertion. On le voit pourtant bien dans le code source : < doc44 > doc44 >

    Quelqu’un a-t-il une idée sur ces soucis ? Merci à vous,

    Cordialement,

    Alexandre

    Répondre à ce message

  • Dans le JPG ci-joint, un exemple de configuration de modèle spip dans ckeditor pour lui faire respecter les formulaires du plugin formidable et pouvoir les insérer via le menu des modèles.

    Répondre à ce message

  • 2

    Bonjour,
     
    Cette fois-ci j’ai cherché à trouver la solution tout seul pendant plusieurs jours, mais c’est nada... (SPIP 3.0.10 & ckeditor-spip3-plugin 0.16.12)
     
    Pour résumer, on peut déclarer des balises personnalisées dans ckeditor (genre <mabalise>blabla</mabalise>), on peut leur donner un sens via les feuilles de styles et/ou le couteau suisse (dans mon cas il s’agit de petites capitales et d’une belle lettrine).
    Mon problème est le suivant : à la création de l’article tout fonctionne correctement (y compris avec le menu des styles de ckeditor, mais dés que l’on tente de remodifier l’article, ckeditor refuse de traiter mes balises personnalisées en balises « Inline » et les encadre de balises p ouvrantes et fermantes. Il suffit de partir d’un article correctement formaté de basculer sur l’éditeur de spip (là c’est encore correct) puis de rebasculer sur ckeditor pour revoir ma balise personnalisée encadrée de balises p...
     
    Ma préoccupation est de ne pas laisser les rédacteurs (qui sont allergiques à toute forme de caractères de contrôle dans un corps de texte...) injecter de code html dans la base de donnée (je vérifie pour chaque construction) je n’autorise donc pas la balise span dans ckeditor, j’y autorise uniquement les version ouvrantes et fermantes de MES balises.
     
    Ci-dessous le contenu de l’article de test avant :

    <malettrine>L</malettrine>orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi lorem, cursus vitae arcu eget, ultrices blandit justo. <petitescapitales>Sed ac porta leo.</petitescapitales> Vivamus tempus bibendum libero at ultricies. Curabitur nec dapibus arcu.

    Puis dès que ckeditor s’ouvre sur le texte :

    <malettrine>L</malettrine>
    
    orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi lorem, cursus vitae arcu eget, ultrices blandit justo.
    
    <petitescapitales>Sed ac porta leo.</petitescapitales>
    
    Vivamus tempus bibendum libero at ultricies. Curabitur nec dapibus arcu.

    Naturellement, mes balises figurent bien dans les options « Balises SPIP à autoriser dans CKEditor » & « Balises HTML que HTML2SPIP doit laisser intouchées » .
    J’ai tenté vainement de faire des recherches sur le traitement des balises inline dans le code de ckeditor, tout ce que j’ai trouvé est la fonction ckeditor_spip2html dans ckeditor_tools.php, mais ça n’est pas très évident de savoir quoi modifier...

    • Et je me réponds à nouveau à moi-même. La réponse se trouve dans la ligne 302 du fichier ckeditor_tools.php (dossier /inc du plugin ckeditor), dans la fonction ckeditor_tag_unprotect.

      C’est la ligne de code suivante qui injecte les balises p :
      $prefix = '<p>' ; $postfix = '</p>' ;

      J’ai copié le fichier ckeditor_tools.php dans /squelettes/inc et remplacé la ligne incriminée par :
      $prefix = '' ; $postfix = '' ;

      Pour l’instant je n’ai pas observé de dégradation du fonctionnement de l’éditeur, mais enfin mes bases de données ne contiennent que du code spip habituel, mes balises personnelles (malettrine, petitescapitales) et les attributs que j’autorise dans ckeditor (exposant, indice, barré)

    • Un dernier détail après avoir placé la bonne version de ckeditor_tools.php au bon endroit, pensez à vide le cache de spip si vous voulez voir les résultats...

    Répondre à ce message

  • 1

    Bonjour,
    En essayant de faire la manip décrite ici sous spip 3 et avec la version 0.16.12 de Ckeditor, (je voulais inscrire un format personnalisé de lettrine), j’ai involontairement supprimé une des trois entrées que me proposait Ckeditor dans le menu « modèles spip » (en fait l’entrée document). A partir de là impossible de rétablir cette entrée, désinstallation du plugin, vidage du cache avant et après (y compris manuelle), réinitialisation du plugin, suppression du répertoire de ckeditor, rien n’y a fait... Si quelqu’un sait comment purger ce plugin... Où cache-t-il ses réglages ?

    Merci par avance, il ne me reste plus qu’à supprimer l’ensemble du répertoire tmp au risque de casser toute l’installation de spip et recommencer une semaine de travail...

    • Je me réponds à moi-même. Le vrai bouton de réinitialisation du plugin se trouve au bas de la page des options avancées de réglage du plugin...
      Reste un dernier souci : du point de vue de la séparation forme-contenu (raison qui m’a fait revenir à spip), ça m’ennuie d’autoriser le stockage dans la base de donnée de la balise span. Mais à chaque jour suffit sa peine...

    Répondre à ce message

  • Bonjour,

    J’ai remarqué que lorsque j’édite un nouvel article, le CKEditor se met en place correctement. Par contre, lorsque j’édite un article existant, il vient s’incruster dans l’éditeur natif de Spip, ce qui fait que les 2 barres d’outils s’affichent l’une en dessous de l’autre. Suis-je le seul à avoir ce souci ?

    D’autre part, lorsque j’enregistre l’article, j’ai systématiquement l’erreur javascript :
    « [CKEDITOR.editor] The instance »text_area« already exists. »
    Pouvez-vous m’aider ?

    Merci d’avance !

    Répondre à ce message

  • 2

    Bonjour,

    Cela peut effectivement être utile pour nos rédacteurs allergiques aux codes et si l’on est un peu puriste et qu’on de veut pas d’un éditeur wysiwyg. Je lis ici que la version de spip de référence est 2.1 : y aura-t-il une version prévue pour spip 3.x ?

    En tout cas, merci pour cette contribution : je la testerai, mais j’ai fait ma migration vers 3.x... donc, wait and see !

    KMk.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

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