Préserver la typo SPIP avec CKeditor

Depuis la version 0.14 du plugin CKeditor pour SPIP, il est possible d’utiliser CKeditor en préservant la typo SPIP: aucun code HTML n’est introduit dans vos articles, tout est reconverti en typographie SPIP.

Les éditeurs visuels ont l’avantage de la simplicité pour l’usager: pas de langage de typo à apprendre, il suffit de cliquer sur des boutons. Le prix à payer pour cette simplicité, c’était jusqu’ici l’introduction de code HTML dans les articles SPIP, là où il ne devrait y avoir que du code typo. Ce code HTML introduit des disparités dans le rendu visuel du site, et il interdit un certain nombre de manipulations basées sur la typo SPIP. De plus, la présence de ce code HTML rendait la cohabitation impossible entre les usagers de CKeditor et les usagers préférant manipuler la typo dans l’éditeur SPIP.

Cette limitation appartient au passé, puisque depuis la version 0.14 du plugin CKeditor pour SPIP, on peut utiliser une librairie — judicieusement nommée HTML2SPIP — pour retransformer en typo SPIP tout le code HTML produit par CKeditor. On a ainsi un éditeur visuel, mais les articles restent rédigés en typo SPIP.

Pour rentrer dans les détails, au moment où on lance CKeditor, SPIP converti sa typo en HTML. CKeditor manipule le code HTML, et quand on enregistre, la librairie HTML2SPIP converti l’HTML en typo SPIP. Tout ne peut pas être converti, et certains enrichissements de CKeditor seront ignorés au moment de la reconversion en typo. Par exemple, CKeditor permet de choisir la couleur d’une section, opération qui n’a pas de sens en typo SPIP (et plus généralement qui est à proscrire si on tente d’imposer une charte graphique cohérente). HTML2SPIP ignorera les colorations introduites par CKeditor, qui seront perdues.

Configuration de CKeditor pour préserver la typo

Tout d’abord, il faut télécharger la librairie HTML2SPIP. Prenez la dernière version, et décompactez la dans le dossier lib de
votre installation de SPIP.

Rendez vous ensuite dans les formulaires de configuration de CKeditor dans l’espace privé. Choisissez le formulaire Configuration avancée, qui ressemble à ceci:

Si à la place des réglages de la section Options HTML2SPIP, vous avez un message indiquant La librairie html2spip n’est pas installée(...), vous pouvez avoir un des problèmes suivants

  • HTML2SPIP n’est pas installée dans le dossier lib.
  • Les permissions dans le système de fichier ne permettent pas au serveur d’y accéder.
  • La version de HTML2SPIP n’est pas celle attendue par le plugin CKeditor. Le plugin attend une version spécifique de la librairie. Le message d’erreur vous donne un lien vers la bonne version.

Activez l’option Reconvertir l’HTML en typo SPIP. Si vous souhaitez que le plugin désactive de lui même les fonctionnalités de CKeditor incompatibles avec la typo SPIP, cochez aussi l’option N’utiliser que les options de CKEditor compatibles avec les raccourcis typographiques SPIP.

Conserver certaines balises HTML

HTML2SPIP élimine les balises HTML qui n’ont pas d’équivalent en typo SPIP, vous pouvez néanmoins vouloir conserver certaines balises, telles que <object> ou <embed>. C’est possible, avec le champ Balises HTML que HTML2SPIP doit laisser intouchées. Placez-y la liste des balises à préserver, séparées par des point-virgules.

Gestion des modèles propres au site

Si vous utilisez des modèles propre au site, il est important de les renseigner dans le champ Balises SPIP à autoriser dans CKEditor, afin que CKeditor et HTML2SPIP n’y touchent pas.

Interception des traitements de conversion

Vous pouvez placer dans votre fichier mes_fonctions.php des fonctions qui seront invoqués avant et après les opérations de conversions HTML vers typo SPIP et typo SPIP vers HTML. Les noms sont assez explicites:

  • ckeditor_spip2html_pre($texte)
  • ckeditor_spip2html_post($texte)
  • ckeditor_html2spip_pre($texte)
  • ckeditor_html2spip_post($texte)

Ce type d’interception peut être utile si vous pratiquez des opérations sur la typo SPIP. Par exemple si vous interceptez typographie_fr() pour transformer les adresses de courriel en images, un traitement dans ckeditor_html2spip_pre() permettra de réaliser l’opération inverse, et ainsi retrouver votre adresses en texte dans votre article.

Chaque fonction prends un unique argument, contenant le texte à traiter, et doit renvoyer le texte traité.

updated on 9 February 2019

Discussion

20 discussions

  • Boll’s

    Bonjour,

    J’ai un bug à l’utilisation de ckeditor et html2spip .
    Impossible d’aligner à gauche ou à droite une image insérée dnas l’article. le paramètre Alignement saute à chaque fois que j’enregistre. Il saute aussi lorsque je bascule de l’editeur ckeditor à l’editeur spip.

    C’est fortement ennuyeux car ça rend mon site virtuellement inutilisable.

    Mon contexte d’utilisation :
    SPIP 2.1.10 [17657]
    CKeditor pour SPIP v0.14[r570] et html2spip en v0.4
    Librairie ckeditor v3.6

    Si quelqu’un a une solution ?

    Merci d’avance

    JM

    Reply to this message

  • Bel effort qui rend l’utilisation de ce plugin très tentant !

    Toutefois j’observe un problème sur la génération des liens. Le bouton “insérer un lien SPIP” génère un lien absolu, ce qui ets un comportement très différent du raccourci typo xx qui permet de préserver l’intégrité du lien même en cas de changement d’URL. Ceci empêche par exemple la saisie du contenu sur un serveur de préproduction avant un passage en production.

    Reply to this message

  • 3

    Bonsoir à tous,

    Plugin TRES interessant... mais

    Tous mes liens SPIP sont cassés lorsque je passe d’un editeur à un autre.

    EXEMPLE :
    dans spip je tape :

    Test de lien http://www.spip-contrib.net/Preserver-la-typo-SPIP-avec-CKeditor

    apres avoir jouer avec le bouton EDITEUR SPIP / EDITEUR CK, j’obtient ceci en spip :

    Test de lien [http://www.spip-contrib.net/Preserv...->/Preserver-la-typo-SPIP-avec-CKeditor]

    C’est a dire qu’il me plante les liens la ou spip effectue un raccourci de lien par defaut.

    Comment faire pour pallier a ca ?

    • Jean-Jacques Puig

      Bonjour,

      Je n’arrive pas à reproduire le bug sur ma config. Avez-vous renseigné le champ ’Adresse (URL) du site public’ dans le back-office > ’Configuration’ > ’Contenu du site’ ?

      — 
      JJP

    • Jean-Jacques Puig

      Bonjour,

      Apparemment, il y a eu des évolutions dans le plugin CKEditor pour SPIP qui expliquent cette situation. J’ai modifié en conséquence html2spip. L’archive html2spip-0.4.zip disponible sur http://ftp.espci.fr/pub/html2spip fait la correction en créant la typo normale.

      — 
      JJP

    • manu0111

      J’ai mis à jour le SVN du plugin ckeditor pour qu’il réclame la version 0.4 de html2spip, mais maintenant il faudrait faire une release. Fred?

    Reply to this message

  • 2

    Lorsque j’utilise la dernière version de du plugin CKeditor pour SPIP et que je configure la conversion vers SPIP, j’ai ce message lorsque j’enregistre mon article :

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ’}’ in /mnt/154/sda/1/4/eelv.couserans/lib/html2spip-0.3/HTMLEngine.class on line 22

    Que faire ?

    Merci d’avance pour votre réponse.

    Cordialement.

    • manu@netbsd.org

      Quelle version de PHP? Ca ne m’étonnerait pas qu’elle date un peu.

    • Merci pour cette réponse pertinante...

      En effet, je suis chez Free et je n’avais pas mis le .htaccess contenant la ligne php 1 et je tournais donc en php 4 sans que je rencontre de problème jusqu’à présent...

      A bientôt,

      Daniel

    Reply to this message

  • Merci et bravo pour ce travail

    Questions:
    lorsqu’on insère une image et qu’elle est un peu trop grande cela gène l’édition. Est-il possible de fixer la largeur d’affichage par défaut (ex 200px) dans l’éditeur (cf image en pj)?

    Ou bien serait-il possible de continuer à voir le code spip
    <imgXXX>
    plutôt que l’image?

    merci d’avance pour votre aide.

    Reply to this message

  • Pour le nom de sale(), oui, c’est pas très flatteur... C’est historique il semble...
    Elle pourrait s’appeler... inverse_propre() en alias de html2spip() : cependant je n’aime pas trop le 2e nom, car c’est confusionnant, on pourrait croire que ça va écrire un squelette SPIP :)

    Dépots sur la zone

    Ça en fait un paquet :)
    Comme quoi c’est un besoin :)

    Reply to this message

  • Pour répondre plus généralement aux interrogations sur ce que HTML2SPIP sait faire, la réponse est «La totale». En vrac:

    • Gras, italique, barré, exposant, indice
    • Exergue, reconverti en enluminure typo [* texte *]
    • Intertitres de niveaux 1 à 6, reconvertis en enluminures typo (ex: {{{** titre2}}})
    • Listes numérotés ou à puces, éventuellement à plusieurs niveaux de profondeur.
    • Tables, avec éventuellement titre, résumé, et fusion de cellules (je le met en gras parce que c’est loin d’être évident à fournir).
    • Balises <cadre>, <code>, <quote> et <poesie>
    • Images et liens SPIP (mais le plugin CKeditor les gère en amon).
    • Puces simples
    • Alignements à droite et centrage (ex: [| texte |])

    Reply to this message

  • 5

    Est-ce que les raccourcis typo des Enluminures Typo v3 sont aussi traités ?

    Par exemple {{{** Titre de niveau 2}}} ?

    • Oui, on fait ça aussi!

    • Salut Emmanuel,

      Je me pose toujours cette éternelle question...

      Y a-t’il moyen de dire à CK qu’il écrive directement en SPIP ? et non en passant par une n-ième fonction sale() (c’est le nom de ces fonctions de passage html->spip qu’on utilise), à l’inverse de propre() donc.

      Cependant... ta fonction sale() là... ça pourrait être intéressant de la mettre à disposition en dehors du plugin, car potentiellement, ça peut servir à beaucoup d’autres situations.

      Sur la zone, il y a donc aussi :

      Je crois qu’il y en a d’autres, mais je retrouve pas. Je ne sais pas lequel est plus à jour de tous.

    • Haha oui, excellent la fonction sale() en face de propre(), on aurait dû penser à ce nom là. Cela dit, c’est sale() qui produirait la typo SPIP, tu es certain que le nom est flatteur et que tu veux le promouvoir?

      La librairie HTML2SPIP a été écrite pour migrer un site d’un autre CMS vers SPIP, avec environ 500 articles et 100 rubriques à l’arrivée. Elle contient donc bien plus que ce qu’on utilise pour CKeditor. Elle sait faire l’import des images et documents, par exemple. On a pas fait le ménage pour la rendre utilisable de façon générique pour tout type d’usage, car c’est difficile d’anticiper comment les gens pourraient en avoir besoin.

      Un usage simple qu’on pourrait peut être faire, c’est un script de nettoyage de base de donnée pour site en SPIP qui a été pollué par de l’HTML à cause de l’usage de CKeditor antérieur à la version 0.14. Et même ça, je ne sais pas trop quelle interface utilisateur cela pourrait avoir. Un formulaire de plus pour le CFG du plugin CKeditor?

    • pour Doctlear2SPIP j’avais repris des vieilles fonctions sales dans le plugin mentionné par Marcimat.

      Il me semblerait plus pertinent d’améliorer ce code et d’avoir une seule fonction sale partout.

      Pour ton histoire d’interface, je pense qu’il faudrait faire comme sur DC2SPIP : un formulaire que tu valide une fois et qui passe tout à la moulinette.

    • Mais je n’ai pas répondu à la question «Y a-t’il moyen de dire à CK qu’il écrive directement en SPIP ?». C’est possible, mais probablement pas sans ré-écrire des pans entiers de CKeditor (l’éditeur, pas le plugin SPIP). Cet éditeur a été écrit pour manipuler de l’HTML. Le chemin qui a été retenu ici était celui de la moindre résistance, et ce d’autant plus qu’on avait déjà HTML2SPIP qui avait été écrit pour une migration.

      C’est vrai qu’un éditeur visuel manipulant la typo SPIP, ça serait mieux, mais visiblement personne n’a été assez motivé pour l’écrire.

    Reply to this message

  • Merci pour ce travail qui enlève mes réticences vis à vis de CKeditor (même si je continue ) penser que ce n’est pas forcément une bonne idée de proposer ce plugin).

    http://geekographie.maieul.net/Vous-pouvez-utiliser-C-Keditor

    Reply to this message

  • Nécessite le plugin Itérateurs (qui dans la listes des plugins s’appelle “Les Itérateurs”) et donc PHP 5.1 ce serait bien de l’ajouter dans la doc. Merci, Ch

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom