Forum PluXml.org

Editeur wysiwyg + gestionnaire de fichier: CKEditor 3.6.4 + KCFinder 2.51

téléchargement ici

/!\ après chaque mise à jour, vider le cache du navigateur en supprimant les fichiers temporaires

Historique
version 1.4.10 (01/02/2013)
BUG Erreur de syntaxe empêchant d'enregistrer des articles

version 1.4.9 (25/01/2013)
BUG Warning sur le chapo qui n'éxiste pas lors de l'édition des pages statiques

version 1.4.8 (25/07/2012)
[+] Ajout du plugin Lightbox plus: effet de zoom sur les images

Activation du plugin Lightbox
1. Aller dans la congifuration du plugin CKEditor
Paramètres > Plugins > lien Configuration
2. Dans le déroulant "Lightbox plus", sélectionner la valeur "Oui"
3. Enregistrer la configuration

Comment utiliser le plugin LightBox pour CKEditor
1. Cliquer sur l'icone "Image" dans la barre d'outil de l'éditeur CKEditor
2. Cliquer sur le bouton "Explorer le server" pour choisir l'image à afficher
3. Cocher la case "Agrandir l'image"
4. Régler les dimensions de l'image pour réduire la taille de l'image affichée (et les autres paramètres si nécessaire)
5. Cliquer sur le bouton "Ok" et sauvegarder votre article.

Retourner sur votre site.
En cliquant sur l'image, l'effet de zoom Lightbox affichera l'image avec ses dimensions originales.

Astuce:
A partir du gestionnaire de médias de PluXml, envoyer une image sur le serveur à partir du bouton "Ajouter des fichiers".
Choisir les tailles de redimensionnement de l'image et de sa miniature.
Dans CKEditor à partir de l'icone "Image", ajouter comme image la miniature (exemple: mon_image.tb.jpg).
PluXml affichera la miniature sur votre site (fichier: mon_image.tb.jpg)
En cliquant dessus, c'est l'image originale qui sera affichée (fichier: mon_image.jpg, sans l'extension .tb)

version 1.4.7 (24/07/2012)
[+] Mise à jour ckeditor version 3.6.4
BUG ckeditor: mauvaise prise en compte des liens absolus/relatifs

version 1.4.6 (17/07/2012)
[+] Plugin syntaxhighlighter: aménagement css
[+] Prise en compte de la transparence des brs pour éviter l'affichage d'images en dessous des vidéos

version 1.4.5 (28/06/2012)
[+] Sélection du thème pour la coloration syntaxique à partir de l'écran de configuration du plugin ckeditor
[+] ckeEditor: Mise en évidence des lignes de code dans la balise <pre>
[BUG] Pas de coloration syntaxique avec la réécriture d'url activée

version 1.4.4 (26/06/2012)
[+] ajout du plugin syntaxhighlight pour avoir la coloration syntaxique
[+] activation des plugins oEmbed et syntaxhighlight à partir de l'écran de configuration du plugin ckeditor

version 1.4.3 (21/06/2012)
[+] ajout plugin oEmbed pour incorporer des médias (ex YouTube, Flickr, Vimeo, Soundcloud, etc...)
/!\ Ne fonctionne pas avec les navigateurs IE7 et IE8

Version 1.4.2 (18/06/2012)
[+] Obfuscation des adresses emails dans le chapo et le contenu des articles
[BUG] Pas de prise en compte du sujet et du corps du message d'un email dans un lien mailto lors de la protection antispam
[BUG] Thème BootstrapCK-Skin: mauvais affichage par défaut des boutons sélectionnés (texte du bouton sur fond bleu non visible)

Version 1.4.1 (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

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

Version 1.3 (18/05/2012)
+Mise à jour de CKEditor en version 3.6.3
+Remplacement de CKFinder par KCFinder 2.51 (alternative open-source)
+Paramètrage du dossier de stockage des fichiers à partir de l'écran de configuration du plugin
+Protection des adresses emails dans les articles

Mon site perso
Mon compte twitter

Yes. Je m'en vais le tester

Merci chef !

Mangez un castor, vous sauverez un arbre !

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 !

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

Merci à Francis.

Mon site perso
Mon compte twitter

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

merci
en test ....

le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | wallpapers free | fonds d'écran naruto

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

Petit à petit l'oiseau fait son nid.
art.je-evrard.net

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.

Mangez un castor, vous sauverez un arbre !

Salut Jerry

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.

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

Mon site perso
Mon compte twitter

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 :

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.

Site professionnel

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/)

Mon site perso
Mon compte twitter

OK, merci Stéphane

Site professionnel

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 class="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 !

Dernière modification par Francis (01/06/2012 21:02:08)

Merci Francis. Je vais tester ça.

Mangez un castor, vous sauverez un arbre !

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).

Dernière modification par Jerry Wham (08/06/2012 03:20:02)

Mangez un castor, vous sauverez un arbre !

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.

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.

Pas bête. Si notre ami Stéphane nous entend...

Dernière modification par Jerry Wham (08/06/2012 18:34:19)

Mangez un castor, vous sauverez un arbre !

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.

Mangez un castor, vous sauverez un arbre !

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é !

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

Mangez un castor, vous sauverez un arbre !

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 !

Dernière modification par Francis (12/06/2012 11:38:32)