SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Rédaction > Assistants de rédaction > CKeditor > CKeditor : API

CKeditor : API

19 mai 2011 – par Frédéric Bonnaud – 10 commentaires

3 votes

Cet article décrit les différents points d’entrées (pipelines) utilisables pour modifier le comportement du plugin CKeditor plus loin que ne le permet l’utilisation de CFG.

Il y a pour l’instant 6 points d’entrée :

  • ckeditor_config_post
  • ckeditor_json_encode
  • ckeditor_html2spip_pre et ckeditor_html2spip_post
  • ckeditor_spip2html_pre et ckeditor_spip2htlm_post

Utilisation des pipelines

Pour utiliser l’un des deux points d’entrée, vous devez avoir un fichier mes_fonctions.php dans votre répertoires squelettes/ (qui doit donc, lui aussi, avoir été précédemment créé).

Le contenu minimal [1] de ce fichier est :

  1. <?php
  2.  
  3. function ckeditor_config_post($config) {
  4. /* insérer ici votre code modifiant $config */
  5. return $config ;
  6. }
  7.  
  8. function ckeditor_json_encode($object) {
  9. /* insérer ici votre code initialisant $result en fonction du contenu de $object
  10.   le résultat doit être json - encodé */
  11. return $result ;
  12. }
  13.  
  14. function ckeditor_html2spip_pre($texte) {
  15. /* insérer ici votre code de modification de $texte */
  16. return $texte ;
  17. }
  18.  
  19. function ckeditor_html2spip_post($texte) {
  20. /* insérer ici votre code de modification de $texte */
  21. return $texte ;
  22. }
  23.  
  24. function ckeditor_spip2html_pre($texte) {
  25. /* insérer ici votre code de modification de $texte */
  26. return $texte ;
  27. }
  28.  
  29. function ckeditor_spip2html_post($texte) {
  30. /* insérer ici votre code de modification de $texte */
  31. return $texte ;
  32. }
  33. ?>

Télécharger

ckeditor_config_post

Ce point d’entrée sert à modifier la configuration qui sera passée à CKeditor lors de son initialisation. La fonction ckeditor_config_post reçoit en entrée un tableau $config contenant la configuration et retourne ce même tableau en sortie (après y avoir apporté diverses modifications).

Par exemple, la configuration actuelle du plugin désactive l’onglet « avancé » de la boîte de dialogue de lien de ckeditor. Cela peut vous déplaire, pour l’activer, il suffit de créer une fonction ckeditor_config_post qui supprimer de l’entrée removeDialogTabs, le paramètre : link:advanced. Par exemple :

  1. function ckeditor_config_post($config) {
  2. unset($config['removeDialogTabs']) ;
  3. return $config ;
  4. }

Télécharger

Autre exemple, vous voulez complètement modifier les menus proposés par CKeditor, la configuration par défaut est donc insuffisante, il suffit de créer, à la main, le menu SpipFull ou SpipBasic (plus utile car non modifiable par CFG), par exemple, en insérant dans votre mes_fonctions;php la fonction :

  1. function ckeditor_config_post($config) {
  2. $config['toolbar_SpipFull'] =
  3. array('NewPage','Preview'),
  4. array('Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'),
  5. array('Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'),
  6. array('insertHtml','Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'),
  7. '/',
  8. array('Styles','Format'),
  9. array('Bold','Italic','Strike'),
  10. array('NumberedList','BulletedList','-','Outdent','Indent','Blockquote'),
  11. array('Link','Unlink','Anchor'),
  12. array('Maximize','-','About')
  13. ) ;
  14. return $config ;
  15. }

Télécharger

Le tableau $config qui est passé en paramètre est l’équivalent php du paramètre javascript : CKEDITOR.config décrit dans la documentation de CKeditor. Il faut juste penser que :

  • si dans documentation on écrit : [ ... ], il faudra taper : array( ... )
  • si dans documentation on écrit : { ... }, il faudra taper : array( ... )
  • si dans documentation on écrit : item : ..., il faudra taper : "item" -> ...
  • etc.
  • si dans la documentation il est fait référence à une constante CKEDITOR.NOM, il faudra la remplacer par : CKEDITOR_NOM

Par exemple, dans la documentation de CKEditor, on peut lire qu’il est possible de modifier les raccourcis clavier utilisé par CKEditor, en passant comme configuration à CKEditor :

  1. config.keystrokes =
  2. [
  3. [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ],
  4. [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ],
  5.  
  6. [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ],
  7.  
  8. [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ],
  9. [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ],
  10. [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ],
  11.  
  12. [ CKEDITOR.CTRL + 76 /*L*/, 'link' ],
  13.  
  14. [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
  15. [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
  16. [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ],
  17.  
  18. [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
  19. ];

Télécharger

Dans la fonction ckeditor_config_post cela se traduira par :

  1. $config['keystrokes'] =
  2. array( CKEDITOR_ALT + 121 /*F10*/, 'toolbarFocus' ),
  3. array( CKEDITOR_ALT + 122 /*F11*/, 'elementsPathFocus' ),
  4.  
  5. array( CKEDITOR_SHIFT + 121 /*F10*/, 'contextMenu' ),
  6.  
  7. array( CKEDITOR_CTRL + 90 /*Z*/, 'undo' ),
  8. array( CKEDITOR_CTRL + 89 /*Y*/, 'redo' ),
  9. array( CKEDITOR_CTRL + CKEDITOR_SHIFT + 90 /*Z*/, 'redo' ),
  10.  
  11. array( CKEDITOR_CTRL + 76 /*L*/, 'link' ),
  12.  
  13. array( CKEDITOR_CTRL + 66 /*B*/, 'bold' ),
  14. array( CKEDITOR_CTRL + 73 /*I*/, 'italic' ),
  15. array( CKEDITOR_CTRL + 85 /*U*/, 'underline' ),
  16.  
  17. array( CKEDITOR_ALT + 109 /*-*/, 'toolbarCollapse' )
  18. );

Télécharger

Faites très attention à ce que ferez du tableau $config : il sera passé tel quel à CKeditor, sans aucun contrôle. En particulier : cela peut empêcher CKeditor de se lancer.

Il faut savoir que le plugin modifie le paramètre $config['toolbar'] à la création de chaque éditeur, il vaut alors soit SpipFull, soit SpipBasic suivant la configuration prévu pour l’éditeur. Il ne sert donc à rien de donner une valeur à ce paramètre : il sera ignoré. C’est la seule modification qui sera faite à ce tableau.

Enfin, il y a une valeur que vous pouvez modifier et qui n’est pas dans la documentation de CKEditor : loadExtraPlugins qui contient une liste de chemins vers un répertoire de plugin (au sens de plugin pour CKEditor - pas de plugin pour SPIP) indexé par les noms des plugins. Par exemple, vous pouvez mettre :

  1. $config['loadExtraPlugins']['monPlugin'] = '/url/vers/mon/plugin/a/moi/' ;

Il est préférable (vu que ckeditor peut-être appelé depuis un contexte public ou privé) de préciser un chemin absolu vers le plugin.

ckeditor_json_encode

Si vous trouvez que la fonction json_encode fournie un mauvais résultat, vous pouvez utiliser votre propre fonction son_encode.

Ceci est utile :

  • soit pour pretty-printer le code javascript utiliser par le plugin (par exemple pour le lire ...)
  • soit parce que la fonction json_encode n’est pas fournie par votre serveur et que celle intégrée au plugin ne vous convient pas.

Par défaut, le code de cette fonction est équivalent à :

  1. function ckeditor_json_encode($object) {
  2. return json_encode($object) ;
  3. }

Télécharger

Mais, pour afficher un javacript indenté, vous pouvez utiliser celui-là :

  1. /**
  2.  *
  3.  * (c) http://recursive-design.com/blog/2008/03/11/format-json-with-php/
  4.  *
  5.  * Indents a flat JSON string to make it more human-readable.
  6.  *
  7.  * @param string $json The original JSON string to process.
  8.  *
  9.  * @return string Indented version of the original JSON string.
  10.  */
  11. function indent($json) {
  12.  
  13. $result = '';
  14. $pos = 0;
  15. $strLen = strlen($json);
  16. $indentStr = "\t";
  17. $newLine = "\n";
  18. $prevChar = '';
  19. $outOfQuotes = true;
  20.  
  21. for ($i=0; $i<=$strLen; $i++) {
  22.  
  23. // Grab the next character in the string.
  24. $char = substr($json, $i, 1);
  25.  
  26. // Are we inside a quoted string?
  27. if ($char == '"' && $prevChar != '\\') {
  28. $outOfQuotes = !$outOfQuotes;
  29.  
  30. // If this character is the end of an element,
  31. // output a new line and indent the next line.
  32. } else if(($char == '}' || $char == ']') && $outOfQuotes) {
  33. $result .= $newLine;
  34. $pos --;
  35. for ($j=0; $j<$pos; $j++) {
  36. $result .= $indentStr;
  37. }
  38. }
  39.  
  40. // Add the character to the result string.
  41. $result .= $char;
  42.  
  43. // If the last character was the beginning of an element,
  44. // output a new line and indent the next line.
  45. if (($char == ',' || $char == '{' || $char == '[') && $outOfQuotes) {
  46. $result .= $newLine;
  47. if ($char == '{' || $char == '[') {
  48. $pos ++;
  49. }
  50.  
  51. for ($j = 0; $j < $pos; $j++) {
  52. $result .= $indentStr;
  53. }
  54. }
  55.  
  56. $prevChar = $char;
  57. }
  58.  
  59. return $result;
  60. }
  61.  
  62. function ckeditor_json_encode($object) {
  63. if (is_array($object)) { ksort($object) ; }
  64. return indent(json_encode($object)) ;
  65. }

Télécharger

ckeditor_html2spip_pre et ckeditor_html2spip_post

Ces deux points d’entrée servent à modifier le texte édité par CKEditor et passé à SPIP.
Lors de la sauvegarde du texte créé par CKEditor dans la base de donnée SPIP, celui-ci passe dans un filtre qui permet transformer certains (voir tous) enrichissements HTML en enrichissement SPIP (en particulier les liens et les documents).

Avant d’appliquer ce filtre, la fonction ckeditor_html2spip_pre est appelée. Une fois ce filtre appliqué, la fonction ckeditor_html2spip_post est appelée, puis le texte est passé à SPIP.

Ces deux appels sont conçus pour fonctionner en parallèle avec la préservation de la typographie SPIP [2].

ckeditor_spip2html_pre et ckeditor_spip2html_post

Ces deux points d’entrée servent à modifier le texte stocké dans la base de donnée SPIP ou collé avant qu’il ne soit passé à CKEditor.

Lors de l’initialisation du texte du CKEditor ou du collage d’un texte dans CKEditor celui-ci passe dans un filtre qui permet transformer certains (voir tous) enrichissements SPIP en enrichissement HTML (en particulier les liens et les documents).

Avant d’appliquer ce filtre, la fonction ckeditor_spip2html_pre est appelée. Une fois ce filtre appliqué, la fonction ckeditor_spip2html_post est appelée, puis le texte est passé à CKEditor.

Notes

[1on peut n’y mettre qu’une seule des 6 fonctions

Dernière modification de cette page le 4 septembre 2011

Retour en haut de la page

Vos commentaires

  • Le 21 mars à 17:23, par Freshou En réponse à : CKeditor : API

    Est-ce qu’une mise-a-jour de ce plugin pour utiliser CKeditor 4 est prévue ?

    Répondre à ce message

  • Le 23 mai 2015 à 11:42, par jmfre En réponse à : CKeditor : API

    Bonjour

    Chose bien étrange : les plugins perso que j’ai ajouté à ckéditor s’affichent correctement en partie privée et ne s’affichent pas en partie publique.

    Je suis en Spip 3

    Une piste ? Une solution ?

    Bonne journée

    Jean-Michel

    Répondre à ce message

  • Le 28 juin 2012 à 09:59, par Nazar En réponse à : CKeditor : API

    Bonjour !
    Comment puis-je faire un lien sur le document ci-joint avec une aide de CKEditor ?
    Désolé pour mon français :)

    Répondre à ce message

  • Le 9 septembre 2011 à 11:19, par Fab En réponse à : CKeditor : API

    Bonjour,

    Avec cette API, est-il possible de surcharger la fonction ckeditor_prepare_champs qui permet de savoir quel textarea utiliser (par defaut name=« texte ») d’une façon quelconque ? Si oui quelle serait la syntaxe ? Je souhaite étendre sur chapo et descriptif (je peux l’ajouter dans ckeditor_fonctions.php mais ça serait plus propre dans mes_fonctions.php non ?)

    Cordialement

    • Le 9 septembre 2011 à 16:03, par Frédéric Bonnaud En réponse à : CKeditor : API

      Dans l’état actuel, ce n’est pas possible : c’est un oubli de ma part.

      J’ajoute cette possibilité dès que possible.

    • Le 9 septembre 2011 à 16:19, par Fab En réponse à : CKeditor : API

      Ok, en attendant je l’ai inscrit en dur dans le fichier ckeditor_options.php, ligne 66, ce qui donne :

      1. 'article'=>array(
      2. array('textarea[name=texte]',$default_tb),
      3. array('textarea[name=chapo]',$default_tb),
      4. array('textarea[name=descriptif]',$default_tb)
      5. ),

      Télécharger

      J’ignore si c’est la bonne syntaxe, mais cela fonctionne (jusqu’à la prochaine mise à jour)

    • Le 10 septembre 2011 à 10:47, par Frédéric Bonnaud En réponse à : CKeditor : API

      C’est effectivement la bonne syntaxe.

      Je viens d’ajouter dans le SVN, le point d’entrée : ckeditor_prepare_champs_post
      qui permet d’ajouter des champs par exemple :

      1. function ckeditor_prepare_champs_post($editer_champs, $default_tb) {
      2. $editer_champs['article'][] = array('textarea[name=chapo]',$default_tb) ;
      3. $editer_champs['article'][] = array('textarea[name=descriptif]',$default_tb) ;
      4. return $editer_champs ;
      5. }

      Télécharger

      ajoutera ckeditor aux champs ’chapo’ et ’descriptif’.

      Cette version du plugin n’est pas encore packagée, mais est sur le SVN uniquement.

    • Le 20 septembre 2011 à 23:00, par Fab En réponse à : CKeditor : API

      Merci,
      Ou étendre à tous les textarea potentiels de l’admin soit :
      chapo : ok
      descriptif : ok
      texte : evidemment
      post-scriptum : mais qui l’utilise à part pour en détourner l’utilisation ;)

      En attendant le package, car le dernier SVN, j’ai pas vu de différence, ni la function (pas grave, ça peut attendre en qui me concerne).

      Autre petit point étonnant, le répertoire de travail que j’utilise est du type :
      http://domaine.org/v2 (qui est bien détecté dans CFG) mais lorsque j’intègre un tag imgXX
      dans le texte le lien est cassé (il zappe le dossier IMG en fait, si je le remet à la main dans le lien (double clic dessus) ca fonctionne)

    Répondre à ce message

  • Le 18 juillet 2011 à 20:09, par Nstr En réponse à : CKeditor : API

    Euh, je ne suis pas un crack, mais ne serait-il pas judicieux de remplacer la syntaxe function ckeditor_config_post_dist($config) donnée au tout début de cet article par function ckeditor_config_post($config) ?

    Chez moi en tout cas la première renvoie un message d’erreur du genre « double-déclaration de la fonction ckeditor_config_post_dist(), bla bla bla », tandis que la deuxième fonctionne.

    M’enfin, je ne fais que supposer, comme je le disais, je suis une buse en php ...

    Merci, en tout cas, pour ce topo utile.

    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

  • Metas +

    3 décembre – 10 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, (...)

  • Newsletters

    16 janvier 2013 – 378 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 20 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • Configurer Sparkpost

    25 avril – 14 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)

Ça spipe par là