[plugin] CKEditor: editeur wysiwyg

Réponses

• Jerry Wham Member

  mai 2012

  Yes. Je m'en vais le tester
  
  Merci chef !
• Francis Member

  mai 2012

  Merci Stéphane pour cette adaptation de KCFinder, car je sais que ce n'était pas simple : enfin libre !
  
  
  Pour ceux qui n'ont pas suivi les épisodes précédents, CKEditor est gratuit mais pas son gestionnaire de fichiers (l'explorateur pour aller chercher les images) : pour utiliser CKFinder autrement qu'en "Version de démonstration", ça coûte 59 $ par site !
  
  Avec KCFinder, on a éditeur + gestionnaire de fichiers libres.
  
  
  Et cette version de CKEditor est améliorée :
  - adresses relatives pour les images et les documents, dans les articles et dans pages statiques
  - adressses mails codées dans les articles
  
  
  Pour protéger aussi les adresses mails dans les pages statiques, je propose un ajout dans ckeditor/ckeditor.php, en remplaçant à partir de la ligne 43 :

  if(!defined('PLX_ADMIN')) {
  	$this->addHook('plxMotorParseArticle', 'protectEmails');
  }
  

  par

  if(!defined('PLX_ADMIN')) {
  	$this->addHook('plxMotorParseArticle', 'protectEmails');
  	$this->addHook('plxShowStaticContent', 'protectEmailsStatiques');
  }
  

  
  
  et en écrivant un peu plus loin la fonction qui protège les mails pour les pages statiques :
  

  /* Méthode qui protège les adresses emails contre le spam pour les pages statiques */
  public function protectEmailsStatiques() {
  
    echo '<?php
      $pattern = "/([\._a-zA-Z0-9-]+)@([\._a-zA-Z0-9-]+)/i";
      $replace = "$1<script type=\"text/javascript\">document.write(\"&#64;\");</script>$2";
      $output = preg_replace($pattern, $replace, $output);
    ?>';
  }
  

  Adresses relatives d'images et emails codés, on commence à être bien avec cet éditeur maintenant libre !
• Stéphane Member, Former PluXml Project Manager

  mai 2012

  Version 1.3.1 (19/05/2012)
  +Protection des adresses emails dans les pages statiques
  
  Merci à Francis.

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Francis Member

  mai 2012

  Merci à toi Stéphane, pour en plus avoir rationalisé mon codage !
  Cette fois, on tient un CKEditor vraiment pro !
• bg62 Member

  mai 2012

  merci
  en test ....

  mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -
• je-evrard Member

  mai 2012

  l'explorateur de fichier (images...) semble ne pas bien marcher. Il ne voit pas la liste des sous dossier...
• Jerry Wham Member

  mai 2012

  Dans la condition pour ne pas afficher l'éditeur, il manque la page comment_new.php ainsi que la page statique.php.
  
  
  J'ai remarqué également qu'on ne peut pas naviguer dans les sous dossiers et notamment dans le dossier documents. Seuls le dossier images et le dossier flash sont disponibles.
• Stéphane Member, Former PluXml Project Manager

  mai 2012

  Salut Jerry
  

  Jerry Wham a écrit:

  Dans la condition pour ne pas afficher l'éditeur, il manque la page comment_new.php ainsi que la page statique.php.

  
  ok pour la page comment_new.php
  pas ok pour les pages statiques. d'accord l'éditeur est problèmatique si on mets du php dedans,... mais ce n'est pas la fonction première de la page statique qui est là pour présenter du contenu statique purement html. L'éditeur wysywyg CKeditor n'est pas un éditeur de programmation.
  

  Jerry Wham a écrit:

  J'ai remarqué également qu'on ne peut pas naviguer dans les sous dossiers et notamment dans le dossier documents. Seuls le dossier images et le dossier flash sont disponibles.

  
  Je jetterai un oeil pour voir ce qu'il en est.

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• joebart Member

  mai 2012

  Bonjour,
  
  Je suis passé sur un hébergeur pro mais j'ai encore un souci avec KCfinder.
  
  J'ai renseigné le chemin pour les images : data/documents/
  
  Mais KC Finder ouvre dans ce répertoire :
  

  http://www.jmr-immobilier.fr/plugins/ckeditor/kcfinder/browse.php?type=images&CKEditor=id_content&CKEditorFuncNum=137&langCode=fr
  

  
  J'arive sur un simple dossier images vide, et sans arborescence.
• Stéphane Member, Former PluXml Project Manager

  mai 2012

  joebart a écrit:

  Bonjour,
  
  Je suis passé sur un hébergeur pro mais j'ai encore un souci avec KCfinder.
  
  J'ai renseigné le chemin pour les images : data/documents/
  
  Mais KC Finder ouvre dans ce répertoire :
  

  http://www.jmr-immobilier.fr/plugins/ckeditor/kcfinder/browse.php?type=images&CKEditor=id_content&CKEditorFuncNum=137&langCode=fr
  

  
  J'arive sur un simple dossier images vide, et sans arborescence.

  
  
  Je vois pas dans quel dossier tu arrives.
  
  Le mieux est de mettre le chemin: data/
  pour avoir les images dans data/images/
  (c'est KCFinder qui rajoute images/ après data/)

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• joebart Member

  mai 2012

  OK, merci Stéphane
• Francis Member

  juin 2012 juin 2012 modifié

  Deux problèmes - avec leur solution - pour cette version de CKEditor + KCFinder :
  
  
  1) Comme le disait joebart, on ne voit pas l'arborescence : on voit le dossier image, mais pas ses sous-dossiers. Cela vient de la modification du fichier kcfinder/lib/helper_dir.php pour la version PluXml.
  Ça marche si on remplace la ligne 135 modifiée :

  if ($type === "dir" || $file[0]=='.' || # ADDED BY PLUXML
  

  par

  if (($file[0]=='.') || (($type === "dir") && (($file == ".") || ($file == ".."))) || # ADDED BY PLUXML
  

  J'ai cru comprendre que le but de cette ligne est de ne pas afficher les répertoires "." et ".." donc j'ai ajouté avec un "ou" la première parenthèse, qui doit éliminer aussi les fichiers commençant par un point, comme .htaccess (qui dans l'explorateur d'images ne sont de toute façon pas visibles, puisque seuls les types image sont pris en compte, mais ça peut être intéressant de laisser cette sécurité). Si tu passes par là, Stéphane, (et si tu en as le temps - on te sollicite de partout !) ça m'intéresserait d'avoir ton avis, merci.
  
  
  
  2) La protection des mails peut poser des problèmes d'affichage dans certains cas.
  Si on a un lien du type :

  <a href="toto@titi.fr">toto@titi.fr</a>
  

  le contenu de href est codé lors de l'écriture par CKEditor, il ne reste donc à coder que le texte placé entre les balises.
  
  
  Mais si dans href l'adresse se trouve en clair comme dans mon exemple, soit parce qu'on l'a écrite directement en mode "Source", soit parce que la page a été créée avant l'activation de CKEditor, il y a du Javascript qui s'écrit à l'intérieur du href au moment de l'affichage, et là c'est la cata !
  
  
  La solution consiste à ne sélectionnner, dans la fonction protectEmails du fichier ckeditor.php, que les adresses qui ne sont pas précédées par mailto:
  Ça peut se faire en ajoutant cette condition au début du motif de l'expression régulière :

  $pattern = "/(?<!mailto:)\b([\._a-zA-Z0-9-]+)@([\._a-zA-Z0-9-]+)/i";
  

  Et là, même si l'adresse mail n'a pas été codée dans le href, on la laisse telle quelle c'est vrai, mais au moins on évite de bouziller l'affichage !
• Jerry Wham Member

  juin 2012

  Merci Francis. Je vais tester ça.
• Jerry Wham Member

  juin 2012 juin 2012 modifié

  Pour voir apparaitre le dossier "documents", il faut ajouter dans le fichier kcfinder/config.php après la ligne 62 :

  'documents' => "",
  

  et dans le fichier ckeditor/ckeditor.php remplacer les ?type=files par ?type=documents, lignes 221 et 227.
  
  
  Au lieu de naviguer dans le dossier files, on naviguera dans le dossier "documents", si l'on clique sur le bouton "lien" puis "explorer le serveur".
  Et ne pas oublier d'indiquer le dossier data/ comme dossier de référence (panneau de config du plugin).
• Francis Member

  juin 2012

  Merci bien, Jerry, encore une belle avancée ! J'ai testé et ça marche ! Ce sera bien utile pour qui voudra mettre un lien vers un fichier pdf ou doc.
  
  
  Je n'ai pas tout à fait les mêmes numéros de lignes que toi :
  - dans kcfinder/config.php, c'est après la ligne 61
  - dans ckeditor/ckeditor.php, ce sont pour moi les lignes 219 et 225
  
  
  En fait, dans ckeditor.php, seule la 1ère modification (ligne 219 pour moi) suffit.
  
  
  Et dans ma lancée, j'ai appliqué ta modif en remplaçant ?type=flash par ?type=documents (ligne 223 pour moi) : ça permet de faire pointer le bouton Flash vers le dossier documents, donc de refaire marcher ce bouton qui n'aboutissait sur rien (il pointait vers un dossier flash inexistant).
  On avance, on avance !
  
  
  Evidemment, il ne faut pas oublier d'indiquer data/ dans la config du plugin. En parlant de ça, je trouvais pas mal que ce paramètre doit préconfiguré avec "data/" comme dans la version précédente 1.3, au lieu d'être vide comme dans la version 1.3.1 (le message d'erreur en cas d'absence du paramètre restant toujours utile).
  
  Je suppose que la plupart des utilisateurs conservent les dossiers par défaut, et ça simplifierait l'installation. Celui qui aurait modifié les dossiers par défaut n'aurait pas de mal à modifier ce fichier de config, l'utilisateur qui veut aller au plus simple n'aurait rien à faire.
• Jerry Wham Member

  juin 2012 juin 2012 modifié

  Francis a écrit:

  
  Et dans ma lancée, j'ai appliqué ta modif en remplaçant ?type=flash par ?type=documents (ligne 223 pour moi) : ça permet de faire pointer le bouton Flash vers le dossier documents, donc de refaire marcher ce bouton qui n'aboutissait sur rien (il pointait vers un dossier flash inexistant).

  
  Si le dossier n'existe pas, il est créé par ckfinder dans le dossier racine (ici data/). Libre à toi ensuite d'y mettre tes fichiers swf.
  
  Le dossier existe donc bien (vérifie après l'exploration du serveur depuis le bouton flash). Libre à toi de le remplir.
  
  Pour les numéros de ligne, j'avais fait quelques tests et j'ai dû ajouter des sauts de lignes sans le vouloir.
  

  Francis a écrit:

  Evidemment, il ne faut pas oublier d'indiquer data/ dans la config du plugin. En parlant de ça, je trouvais pas mal que ce paramètre doit préconfiguré avec "data/" comme dans la version précédente 1.3, au lieu d'être vide comme dans la version 1.3.1 (le message d'erreur en cas d'absence du paramètre restant toujours utile).
  
  Je suppose que la plupart des utilisateurs conservent les dossiers par défaut, et ça simplifierait l'installation. Celui qui aurait modifié les dossiers par défaut n'aurait pas de mal à modifier ce fichier de config, l'utilisateur qui veut aller au plus simple n'aurait rien à faire.

  
  Pas bête. Si notre ami Stéphane nous entend...
• Jerry Wham Member

  juin 2012

  Petite achtuce pour ceux qui veulent modifier les smilies tout moche de ckeditor.
  Premièrement, placer les nouvelles images dans le dossier /plugins/ckeditor/ckeditor/plugins/smiley/images/.
  
  Ensuite, en fonction des images que vous aurez placé, modifier la liste des smilies dans le fichier /plugins/ckeditor/ckeditor/ckeditor.js, ligne 84 (tableau i.smiley_images) ainsi que leur description (ligne 84, tableau i.smiley_descriptions).
  
  Enfin, il faudra surement adapter la taille de la fenêtre pop-up, si vous mettez plus de smilies qu'à l'origine, en modifiant la hauteur (paramètre minHeight, ligne 7 du fichier /plugins/ckeditor/ckeditor/plugins/smiley/dialogs/smiley.js).
  
  Voilou. Je l'ai fait en utilisant les smilies du sdz.
  
  Dernière manipulation, pour les perfectionnistes, si vous souhaitez également changer le smiley du bouton d'appel, il faut modifier l'image /plugins/ckeditor/ckeditor/skins/kama/icons.png
  
  Enjoy.
• Francis Member

  juin 2012

  Merci Jerry pour cette astuce, je regarderai ça quand j'aurai un peu de temps.
  Ça paraît très intéressant, ça permettrait aussi d'utiliser des des flèches ou d'autres éléments de petite taille.
  
  
  Pour le dossier flash, effectivement, il se crée bien tout seul. Je ne l'avais pas vu - ou je l'avais oublié depuis le moment où j'ai commencé à regarder comment intégrer KCFinder.
  
  
  Mon idée d'utiliser le dossier "documents" pour les fichiers Flash et le bouton qui va avec, c'est pour l'utilisateur qui ne passe que par l'interface d'administration, et qui n'utilise pas le FTP. Il n'a donc accès qu'aux dossiers "images" et documents" et à leurs sous-dossiers.
  
  
  Mais bon, ce ne sera pas un cas très courant... Un bouton pour insérer une vidéo sera plus souvent demandé !
• Jerry Wham Member

  juin 2012

  Francis a écrit:

  Mon idée d'utiliser le dossier "documents" pour les fichiers Flash et le bouton qui va avec, c'est pour l'utilisateur qui ne passe que par l'interface d'administration, et qui n'utilise pas le FTP. Il n'a donc accès qu'aux dossiers "images" et documents" et à leurs sous-dossiers.

  S'il passe par l'interface d'administration, il aura accès au dossier flash s'il passe par ckfinder.
• Francis Member

  juin 2012 juin 2012 modifié

  C'est pas faux ! Je n'ai pas l'habitude d'utiliser le bouton "Envoyer" dans KCFinder (en fait, je passe en général par le FTP, et si j'utilise l'admin de PluXml pour envoyer des fichiers, c'est souvent pour faire des tests).
  
  
  Et pour supprimer un fichier, il y a le clic droit : l'utilisateur a donc bien accès au dossier Flash, merci Jerry !
• Stéphane Member, Former PluXml Project Manager

  juin 2012

  Version 1.4 (16/06/2012)
  [+] Paramétrage par défaut du dossier de stockage des fichiers dans data/ à l'activation du plugin
  [+] Pas d'affichage de ckeditor sur la page de rédaction d'un nouveau commentaire (comment_new.php)
  [+] Nouveau thème par défaut (retour à l'ancien possible à partir de l'écran de configuration du plugin)
  
  [BUG] Pas d'affichage des sous dossiers dans KCFinder
  [BUG] Mauvais encodage des adresses emails dans les liens href

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Jerry Wham Member

  juin 2012

  Je viens de tester et ça marche nickel. Et c'est beaucoup plus joli, surtout les pop-up.
  
  
  L'affichage des sous-dossiers fonctionne parfaitement également.
  La seule chose est que j'ai modifié le fichier plugins/ckeditor/ckeditor.php et le fichier plugins/ckeditor/kcfinder/config.php comme je l'ai indiqué ici.
  
  
  Seul petit bémol, si on agrandit la page (du moins sous opera 12.0), en cliquant sur le bouton en forme d'étoile (avant le bouton source), les boutons s'affichent mal. La partie de gauche a un fond sombre. Il semble qu'ils soient décalés vers la gauche (ou que le corps soit décalé vers la droite ?).
• Francis Member

  juin 2012

  Merci bien, Stéphane, pour cette version !
  
  
  A l'installation, je n'ai pas eu le dossier data/ par défaut, je crois qu'il manque le fichier parameters.xml.
  
  
  Pour le thème, je suis revenu à la version kama, à cause des bugs indiqués par Jerry (pour moi avec Firefox 13) et aussi parce qu'il manque les 5 boutons couper-copier-coller-coller sans mise en forme-coller à partir de Word, + les 2 boutons rechercher-remplacer.
  
  
  Pour le codage des mails, le codage (comme l'aurait fait CKEditor) des href="mailto:..." qui seraient restés en clair, c'est fort !
  Juste une chose : dans plugins/ckeditor/ckeditor.php, fonction encodeLinkEmail, il manque une parenthèse à la fin de la ligne 135, pour fermer javascript:void(...).
  
  
  Et je vote aussi pour la modif proposée par Jerry pour permettre l'accès au dossier "documents". Je la remettrai dans ma version, sinon on n'a aucun accès à ce dossier par KCFinder.
• Jerry Wham Member

  juin 2012 juin 2012 modifié

  Si tu veux voir d'autres boutons, essaie cette configuration. Dans le fichier plugins/ckeditor/ckeditor.php remplace tout ce qu'il y a dans le else de la ligne 253 par :

  echo "
  toolbar :
    [
  	['Format','Font','FontSize','Maximize'],
  	'/',
  	['Image','Flash','-','Table','HorizontalRule','Smiley','SpecialChar','-','ShowBlocks','-','Source','-','Undo','Redo','Cut','Copy','Paste','PasteText','PasteFromWord','-','Find','Replace'],
  	'/',
  	['Bold','Italic','Underline','Strike','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','TextColor','BGColor','-','Link','Unlink','Anchor','-','NumberedList','BulletedList','Outdent','Indent','Subscript','Superscript','Blockquote','CreateDiv','-','RemoveFormat']
  
     ],
  ";
  

  
  Cela ajoutera les boutons qu'il te manque.
• Stéphane Member, Former PluXml Project Manager

  juin 2012

  @Jerry et @Francis: je prends en compte vos remarques. j'ai fait une maj dès que possible

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Stéphane Member, Former PluXml Project Manager

  juin 2012

  Francis a écrit:

  A l'installation, je n'ai pas eu le dossier data/ par défaut, je crois qu'il manque le fichier parameters.xml.

  
  Le fichiers parameters.xml est créé à l'activation du plugin avec les paramètres par défaut (/data)
  Si tu as déjà un fichier parametres.xml il n'est pas écrasé pour ne pas perdre tes réglages lors d'une mise à jour.

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Francis Member

  juin 2012

  Merci bien, Jerry pour les boutons et Stéphane pour la prochaine mise à jour.
  
  
  J'ai vérifié le codage des href="mailto:..." à l'affichage, ça marche impeccable.
  On pourrait maintenant supprimer l'encodage automatique par CKEditor, en enlevant dans ckeditor/ckeditor/config.js cette ligne qui n'a plus d'utilité :

  config.emailProtection = 'encode';
  

  
  Ça permettrait d'enregistrer telles quelles toutes les adresses : si on édite directement un fichier article ou une page statique, c'est beaucoup plus clair de trouver href="mailto:titi@toto.fr" que href="javascript:void(location.href='mailto:'+String.fromCharCode(116,105,116,105,64,116,111,116,111,46,102,114))"
  
  
  Cette lourdeur d'écriture était justement un point qui m'embêtait un peu, la solution est là !
• Stéphane Member, Former PluXml Project Manager

  juin 2012

  version 1.4.1 (16/06/2012)
  [+] Utilisation du dossier documents (filebrowserBrowseUrl, filebrowserFlashBrowseUrl et filebrowserUploadUrl)
  [+] Ajout des boutons manquants dans le thème BootstrapCK-Skin
  [BUG] parenthèse oubliée dans le javascript d'encodage des adresses emails mailto
  [BUG] pas d'encodage des emails dans le chapo
  [BUG] fond transparent en mode plein écran dans le thème BootstrapCK-Skin

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Stéphane Member, Former PluXml Project Manager

  juin 2012

  Francis a écrit:

  Merci bien, Jerry pour les boutons et Stéphane pour la prochaine mise à jour.
  
  
  J'ai vérifié le codage des href="mailto:..." à l'affichage, ça marche impeccable.
  On pourrait maintenant supprimer l'encodage automatique par CKEditor, en enlevant dans ckeditor/ckeditor/config.js cette ligne qui n'a plus d'utilité :

  config.emailProtection = 'encode';
  

  
  Ça permettrait d'enregistrer telles quelles toutes les adresses : si on édite directement un fichier article ou une page statique, c'est beaucoup plus clair de trouver href="mailto:titi@toto.fr" que href="javascript:void(location.href='mailto:'+String.fromCharCode(116,105,116,105,64,116,111,116,111,46,102,114))"
  
  
  Cette lourdeur d'écriture était justement un point qui m'embêtait un peu, la solution est là !

  
  Je lis ton post juste après avoir mis à jour en 1.4.1
  Bon ben ça sera pour la 1.4.2 car tu as raison, c'est mieux d'avoir l'encodage à la volée et pas stocké dans le fichier.

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Francis Member

  juin 2012

  Merci Stéphane, j'attends la 1.4.2 !
  
  
  Pour le dossier par défaut, il s'inscrit à l'activation du plugin, c'est pour ça que je ne l'avais pas : j'avais simplement remplacé le dossier ckeditor. Le plugin était déjà activé mais à partir de la version précédente.
  
  
  Les défauts du thème BootstrapCK-Skin ont disparu, tous les boutons sont là, ça baigne !