[plugin] CKEditor: editeur wysiwyg

191012141518

Réponses

  • abda11ahabda11ah Member
    février 2015 modifié
    finalement j'ai trouvé :

    j'avais même pas vu la page de configuration du plugin :lol:
  • fenrirfenrir Member
    février 2015 modifié
    Bonjour,

    J'ai un probleme recurent (cad depuis le debut) avec le gestionnaire de fichier du CKEditor.
    J'utilise:
    - CKEditor - version 4.4.6.1 (27/01/2015) author : Stéphane F - http://pluxopolis.net
    - PluXml version 5.3.1 (charset UTF-8)
    - PHP version : 5.4.26
    State of "magic quotes" :
    ? ../../data/configuration/ has write access
    ? ../../data/articles/ has write access
    ? ../../data/commentaires/ has write access
    ? ../../data/statiques/ has write access
    ? ../../data/images/ has write access
    ? ../../data/documents/ has write access
    ? Apache URL Rewriting module mod_rewrite available
    ? GD library installed
    ? Mail sending function available

    Le probleme est durant l'upload de fichier ou la creation de folder, en fait tout le gestionnaire de fichier Roxy.
    Tout ce passe bien jusqu'a la fin de l'upload ou il reste sur la fenetre suivante avec un upload de 100% et juste le bouton cancel.

    Si je regarde le repertoire, rien n'est uploade/cree.
    Apres fouillages des log, j'ai trouve ceci en erreur php :
    ex lors de la creation de repertoire:
    PHP Warning: opendir(/www/~user/pluxml/data/images): failed to open dir: No such file or directory in /data/homedirs/user/public_html/pluxml/plugins/ckeditor/fileman/php/functions.inc.php on line 105, referer: http://server/~user/pluxml/plugins/ckeditor/fileman/index.html?integration=ckeditor&type=image&CKEditor=id_content&CKEditorFuncNum=110&langCode=en
    ex lors de l'uoload d'une image:
    PHP Warning: opendir(/www/~user/pluxml/data/images): failed to open dir: No such file or directory in /data/homedirs/user/public_html/pluxml/plugins/ckeditor/fileman/php/functions.inc.php on line 105, referer: http://server/user/pluxml/plugins/ckeditor/fileman/index.html?integration=ckeditor&type=image&CKEditor=id_content&CKEditorFuncNum=110&langCode=en

    Le chemin qui est utilise n'est pasle bon, il manque un repertoire entre les 2. Mais par contre je ne vois pas ou le modifier.
    Le path (absolu) devrait etre : /home/user/public_html/pluxml/data/images
    Celui-ci est bon par contre : /data/homedirs/user/public_html/pluxml/....

    Au niveau de la config de ou placer lesi mages, j'ai bien mis: data/images/
    Le problem esemble plutot etre de la racine utilisee pour ajouter ce chemin.

    QQ aurait-il un idee ? En attendant je suis sur le plxediteur (qui est pas mal du tout).
  • StéphaneStéphane Member, Former PluXml Project Manager
    @fenrir: il faudrait que je puisse débugger à partir de ton serveur en ayant accès à tes fichiers par ftp. Si tu veux me contacter par mail directement en me communiquant les infos nécessaires, j'essayerai de t'aider.

    Consultant PluXml

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

  • arf, merci pour l'ofrre, mais le tout est en environement clos, donc pas d'acces depuis l'exterieur possible (corporate policy et security.. blablabla)

    J'ai recherche un peu et dans le ckeditor.php, lors de l'appel j'ai touve que le FILEMAN_FILES_ROOT est deja incorrect au moment de remplir la SESSION
    Ca me donne ca :
    FILEMAN_FILES_ROOT = /user/pluxml/data/images
    Ce qui ne corresponds a aucun path valide.
    A la limite /user/public_html/pluxml/data/images serait correct, mais dans le message d'erreur il trouve le moyen de rajouter un /www devant qui n'existe nul part.
    En forcant dans le .php la variable a un chemin valide, j'a iquands meme le meme resultat.
  • StéphaneStéphane Member, Former PluXml Project Manager
    @fenrir: essaye de voir avec un phpinfo si tes variables systèmes sont bien renseignées, pas que tu cherches au niveau de ckeditor, alors que c'est peut etre le serveur qui est mal configuré (apache, php, etc...)

    Consultant PluXml

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

  • Je pense a voir trouve.
    Le message donne : PHP Warning: opendir(/www/~user/pluxml/data/images)....
    Le path est construit a partir du FILEMAN_FILES_ROOT qui est bon, mais il rajoute au debut le /www/ qui semble correspondre au DOCUMENT_ROOT de apache _SERVER["DOCUMENT_ROOT"] . Dans mon cas le document root est inutilise car tous les sites sont sont associes a des utilisateurs. Le www contient juste un index.html vide.
    Cette config ne semble pas poser de probleme a pluxml ni aux autre applications installees.
    Je vais fouiller ca un peu plus...
  • aruhunoaruhuno Member
    février 2015 modifié
    Bonjour,

    Je viens faire mon relou pour changer...
    En lisant un peut de documentation sur CKeditor, je me suis rendu compte qu'on pouvait assez facilement rajouter des styles et même appliquer un CSS directement dessus. Bref, en gros, j'ai ajouté deux paramètres à la fin de la fonction AdminFootEndBody() de ton plugin, voilà ce que ça donne :
    [== PHP ==]
    	public function AdminFootEndBody() {
    
    		$extra = trim($this->getParam('extraPlugins'));
    		$extraPlugins = ($extra !='' ? ','.$extra : '');
    		$extraPlugins = str_replace(' ', '', $extraPlugins);
    
    ?>
    <script>
    <!--
    if(typeof CKEDITOR != 'undefined') {
    	var roxyFileman = '<?php echo PLX_PLUGINS ?>ckeditor/fileman/index.html?integration=ckeditor';
    	var textareas = document.getElementsByTagName("textarea");
    	for(var i=0;i<textareas.length;i++) {
    		CKEDITOR.replace('id_'+textareas[i].name, {
    			extraPlugins: 'justify,showblocks,widget,lineutils,oembed<?php echo $extraPlugins ?>',
    			scayt_autoStartup: true,
    			extraAllowedContent: 'video[*]{*}',
    			filebrowserBrowseUrl: roxyFileman,
    			filebrowserImageBrowseUrl: roxyFileman+'&type=image',
    			removeDialogTabs: 'link:upload;image:upload'
    		});
    CKEDITOR.config.stylesSet = 'my_styles:http://inios.fr/themes/inios/ckeditor/styles.js';
    CKEDITOR.config.contentsCss = 'http://inios.fr/themes/inios/ckeditor/style.css';
    	}
    }
    -->
    </script>
    <?php
    //extraAllowedContent: 'video[*]{*};source[*]{*}',
    	}
    

    Bon évidemment, c'est codé en dur, mais y a pas énormément à faire pour utiliser <?php $plxShow->template(); ?>.
    Si la modif' t’intéresse, je la proposerait sur ton GitHub =]
  • NaBiSsNaBiSs Member
    Salut à tous,

    Dans la dernière version du plugin oEmbed il y a une erreur. Si vous essayez sur une installation toute fraiche PluXml + CKEditor, vous allez voir que le code généré par oEmbed sur les vidéos Youtube est erroné.

    Cette erreur vient du fichier js jquery.oembed.min.js utilisé par ce plugin qui n'est pas à jour.

    Le problème peut être résolu en remplaçant ce fichier par celui sur cette page : https://github.com/nfl/jquery-oembed-all.


    En tout cas merci beaucoup pour ce package très pratique ! O:)
  • StéphaneStéphane Member, Former PluXml Project Manager

    Consultant PluXml

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

  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 4.4.7 (25/03/2015) ##

    + Configuration de la hauteur de ckeditor à partir de l'écran de configuration du plugin
    + CKEditor 4.4.7 http://ckeditor.com/
    + Roxyfileman 1.4.3 http://www.roxyfileman.com/
    + Justify Plugin 4.4.7 http://ckeditor.com/addon/justify (justify)
    + Show Blocks 4.4.7 http://ckeditor.com/addon/showblocks (showblocks)
    + oEmbed Plugin 1.1.7 http://ckeditor.com/addon/oembed (oembed)
    + Widget Plugin 4.4.7 http://ckeditor.com/addon/widget (widget)
    + Line Utilities 4.4.7 http://ckeditor.com/addon/lineutils (lineutils)
    [BUG] fix #3: Plugin oEmbed fichier jquery.oembed.min.js https://github.com/nfl/jquery-oembed-all

    Consultant PluXml

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

  • bankaibankai Member
    Merci Stéphane :) fonctionne bien mais ne se met pas à jour ^^ il dezippe le zip avec ce nom : ckeditor-4.4.7 et non ckeditor
  • StéphaneStéphane Member, Former PluXml Project Manager
    @bankai: pas encore eu le temps de regarder le problème avec le plugin MyPluginDownloader pour le nom du .zip
    Merci pour le signalement. Au pire il faut faire la mise à jour manuellement

    Consultant PluXml

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

  • Stef c'est a cause de la fonction rename (je pense) je l'ai fixé sur spxplugindownloarder.

    a+

    jéjé
  • cpalocpalo Member
    Bonjour

    J'aurai besoin d'une petite précision pour la configuration de CKEditor, où il nous est demandé le dossier de stockage des fichiers.
    J'avais indiqué data/medias/ ( j'utilise la version en cours de développement de Pluxml).
    Mais n'est-ce pas plutôt simplement data/ que je devrai indiquer ?
    Lorsqu'il est dit lieu de stockage des fichiers, est-ce qu'on fait référence aussi aux articles et pages statiques?

    Cordialement
  • danielsandanielsan Member
    mars 2015 modifié
    helloooooooo :cool:

    je tourne sur la futur version de PluXml (trop chouette les mecs ! )
    comment fonctionne le champ "extraPlugins" ?
    je suis allé DL ma version de CKEditor et l'ai remplacé par celle par defaut, mais ça ne marche pas ... il y a une astuce ?
    dois-je en plus nommer dans le champ la liste des plugins rajoutés ?
    Merci, ;)

    ps : en cochant "ne pas utiliser l'éditeur dans les pages statics", le plugin apparaît tout de même dans la config du plugin plXMyContact par exemple (champ "rajouter un texte au dessus du formulaire")
    je voulais rajouter les balises "adress" etc dans le source, mais l'éditeur me les enlève :mad:
  • StéphaneStéphane Member, Former PluXml Project Manager
    @danielsan
    1) pour le champ "extraPlugins":
    par exemple ici: http://ckeditor.com/addon/autosave, il est écrit qu'il faut pour déclarer le plugin écrire
    config.extraPlugins = 'autosave';
    
    Pour éviter de mettre les mains dans le code du plugin, il suffit d'écrire dans le champ 'extraPlugins' sur la page de config du plugin: autosave, après avoir télécharger cet addon et l'avoir dézipper dans /plugins/ckeditor/ckeditor/plugins/
    2) l'intéraction de ckeditor avec les plugins utilisateurs est à gérée, c'est pour cela que tu as ckeditor dans la config de plXMyContact. à mettre sur la todo...

    Consultant PluXml

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

  • oki merci Stéphane, j'avais utilisé CKbuilder alors qu'il suffit juste de télécharger le plugin souhaité, de cette manière ça fonctionne !
    (j'avais bien entendu regardé la structure du plugin et avais compris la déclaration dans le JS ;) )
    reste maintenant à faire fonctionner leur plugin :lol:
  • BeduckBeduck Member
    Bonjour,
    Je viens seulement de passer à la nouvelle version mais j'ai remarquer que lorsque on ajoutait des classes sur les div en mode source, elle se suppriment en repassant en mode normal. Ce qui n'est pas très pratique.
    Y a t il un plugin à ajouter en plus pour pouvoir éditer les classes ?

    Merci
  • StéphaneStéphane Member, Former PluXml Project Manager
    @Beduck: oui c'est possible, comme c'est un peu long à expliquer, je ferai une réponse plus tard parce que je n'ai pas le temps là tout de suite maintenant. voilà c'est juste pour passer l'info comme quoi c'est faisable.

    Consultant PluXml

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

  • FrancisFrancis Member
    juin 2015 modifié
    @Beduck :

    Je ne sais pas si c'est ce à quoi pense Stéphane : j'ai désactivé le filtre ACF (Advanced Content Filter), car entre autres il supprime les classes écrites en mode source.

    La modification s'effectue dans le fichier plugins/ckeditor/ckeditor.php
    => il suffit d'ajouter une virgule à la fin de la ligne 119 (removeDialogTabs: ...),
    puis d'insérer à la suite une ligne qui autorise la prise en compte des modifications en mode source (allowedContent: true)

    + j'ai ajouté pour ma part deux autres lignes (modification de paramètres initiaux du fichier ckeditor/ckeditor/config.js) :
    - pour faire réapparaître les boutons "souligné", "indice" et "exposant" (supprimés dans ce config.js)
    - pour ajouter au menu "Format" les niveaux de titre h4 à h6 (pas fondamental, mais j'ai eu besoin de h4)

    Attention : pas de virgule à la fin de la dernière ligne, avant l'accolade de fin.
    [== PHP ==]
    removeDialogTabs: 'link:upload;image:upload',
    allowedContent: true   // prise en compte des modifications en mode "source" (attributs, balises, ...)
    removeButtons: '',  // pour rétablir boutons "souligné", "indice" et "exposant"
    format_tags: 'p;h1;h2;h3;h4;h5;h6;pre' // ajout des titres h4 à h6
    

    J'ai fait quelques autres modifs dans CKEditor, je vais les écrire à part pour clarifier la lecture des posts.
  • FrancisFrancis Member
    juin 2015 modifié
    Autres personnalisations dans ma version de CKEditor, chacun y trouvera ce qui lui convient :

    - pour un code source plus clair, enregistrement des caractères accentués tels quels, sans entités HTML

    - correction orthographique en français

    - liste plus complète de caractères spéciaux (bouton "Ω") => j'ai créé le fichier ckeditor-modif-specialchars.php téléchargeable ici, à placer dans le même dossier que le fichier ckeditor.php => plugins/ckeditor/

    Modifications :
    Dans le fichier plugins/ckeditor/ckeditor.php, ça revient à ajouter ces lignes dans la fonction AdminFootEndBody de ckeditor.php, juste avant l'accolade de fin de la boucle for(var i=0;i<textareas.length;i++) { ...} :
    [== PHP ==]
    CKEDITOR.config.entities = false; // pour faciliter la lecture du code source, les accents ne sont pas transformés en entités HTML (inutiles avec le codage utf-8 des pages)
        
    // Correction orthographique en français par défaut :
    CKEDITOR.config.language = 'fr';  
    CKEDITOR.config.wsc_lang = "fr_FR";  
    CKEDITOR.config.scayt_sLang = 'fr_FR';
    // config.scayt_autoStartup = false;    // Ligne à activer s'il faut supprimer la correction orthographique automatique, qui génère beaucoup d'accès Internet et peut ralentir l'édition
    
    <?php include('ckeditor-modif-specialchars.php'); /* Caractères spéciaux personnalisés, pour davantage de choix */ ?>
    
    J'ai encore quelques autres modifs sous la main, voir la suite... :)

    ---
    Il reste un problème non résolu : dans Chrome et IE, il est impossible de redimensionner les images avec la souris (avec Firefox, ça marche très bien).
    Quelqu'un aurait-il une solution ?
  • BeduckBeduck Member
    Super, merci pour les réponses très rapide.

    Ca fonctionne très bien.
    Je vais regarder les modifications plus tard, merci

    J'avais déjà essayer de faire quelques modifications dans le plugin comme, permettre de déplacer des blocs entiers. Mais, à part faire tout planter, je ne suis arrivé à rien d'autre.
  • FrancisFrancis Member
    mai 2015 modifié
    Pour déplacer des blocs, je pense que le couper-coller reste encore la solution la plus simple !

    A part ça, j'ai quelques autres ajouts/modifs pour CKEditor, notamment des plugins : voir la suite... :)
  • StéphaneStéphane Member, Former PluXml Project Manager
    @Francis: j'ai bien envie d'intégrer certaines de tes modifs dans le plugin (soit directement dans le code, soit de façon paramétrable à partir de l'écran de config). ça me semblerait pas mal.

    Consultant PluXml

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

  • FrancisFrancis Member
    mai 2015 modifié
    Merci, Stéphane :) Il me reste encore quelques messages à envoyer pour faire part de mes modifications, je n'ose pas tout mettre à la fois ! Je te dirai quand j'aurai tout mis, tu pourras faire le tri !

    Alors maintenant, voici les plugins que j'ai ajoutés à CKEditor, soit pour retrouver certains boutons de la version précédente, soit pour des fonctions qui me manquaient depuis longtemps :

    Police et taille des caractères (listes déroulantes)
    --> font (Font Size and Family)
    + dépendances : plugins richcombo (Rich Combo), floatpanel (Floating Panel), listblock (List Block), button (UI Button) + plugin panel (Panel) pour Floating Panel et List Block

    Couleur du texte et du fond (listes de choix)
    --> colorbutton (Color Button) + dépendance : plugin panelbutton (Panel Button) [+ aussi les dépendances button (UI Button) et floatpanel (Floating Panel), plugins déjà utilisés pour le plugin font ]

    Rechercher/Remplacer
    --> find (Find / Replace, recherche et remplacement)

    Espace insécable
    --> nbsp (Non-breaking space, espace insécable avec Ctrl + espace)

    Code source
    --> - textselection (Keep TextSelection, conserve la sélection entre mode Wysiwyg et mode Source)
    - codemirror (CodeMirror (Source) Syntax Highlighting, coloration syntaxique et mise en forme lisible pour le mode Source + fermeture automatique des balises ajoutées)

    ---
    J'avais aussi étudié le plugin "autosave" de sauvegarde automatique pour CKEditor, mais il est inutile, car il existe déjà en tant que plugin pour PluXml.

    Comme ça commence à faire pas mal de choses, pour faciliter les tests, voici le plugin CKEditor avec les modifications des messages précédents et de deux ou trois à venir : ici
    IMPORTANT => pour activer ces plugins, inscrire leur nom dans "extraPlugins" (config. CKEditor dans l'admin) :
    font,richcombo,floatpanel,panel,listblock,button,colorbutton,panelbutton,find,nbsp,textselection,codemirror

    Rappel de la méthode pour ajouter un plugin dans CKEditor : ici sur le site Pluxopolis.net
  • BeduckBeduck Member
    Oui c'est plus simple le copier/coller, mais pour une personne qui ne connait rien du tout, au risque de mal copier le code et ça fait vite un désordre dans la mise en page.

    j'essayais de faire du principe-ci: http://www.innovastudio.com/builderdemo/example8.html
  • FrancisFrancis Member
    mai 2015 modifié
    J'ai modifié l'explorateur de fichiers (utilisé notamment pour insérer une image), et là j'entends déjà Stéphane me dire qu'il ne faut pas retomber dans les bidouillages de KCFinder ! ]:D
    Historique : c'était l'explorateur de la version précédente et il avait fallu pas mal le bricoler, mais c'était quand même un progrès par rapport à celui d'encore avant, qui était CKFinder avec l'affichage "Version de démonstration" !

    Bon, j'ai transmis ces modifs au concepteur de Roxy Fileman et au moins la correction de la traduction sera pris en compte.

    1) Remplacement du fichier de langue en français ckeditor/fileman/lang/fr.json (l'original n'est qu'une très mauvaise traduction automatique).
    Le fichier modifié est ici.

    + j'ai supprimé les fichiers de toutes les langues, sauf "en.json" et "fr.json", pour alléger le plugin.


    2) En mode d'affichage "miniatures", affichage du nom et de la date de chaque fichier, en plus de sa taille
    => lignes à ajouter à la fin du fichier ckeditor/fileman/css/main.min.css :
    [== CSS ==]
    div.pnlFiles ul#pnlFileList.thumbView .name { display: block; position: relative; top: -24px; 
                                                  width: 100%; height: 1.2em; overflow: hidden; text-overflow: ellipsis; }
    div.pnlFiles ul#pnlFileList.thumbView .time { display: block; margin-top: 12px; font-size: 95%;}
    div.pnlFiles ul#pnlFileList.thumbView .icon {  margin-top: -5px !important; }
    div.pnlFiles ul#pnlFileList.thumbView .size { bottom: 0; font-size: 95%; }
    


    3) Avec les modifs précédentes, on peut éventuellement régler la vue par défaut sur 'Miniatures" au lieu de "Liste", dans le fichier ckeditor/fileman/conf.json, en changeant le paramètre "DEFAULTVIEW" :
    "DEFAULTVIEW":  "thumb",
    
    au lieu de "list".

    ---
    Réponse de Lyubomir Arsov, concepteur de Roxy Fileman :
    - il va intégrer cette traduction en français (sans doute à l'occasion de la prochaine version)
    - il a prévu de retravailler le fichier CSS
    - et il préfère laisser l'affichage en liste par défaut, pour des raisons de performances
    (il me semble que les miniatures soient générées en temps réel et pas mémorisées, ce qui n'est pas plus mal)
    ---
  • StéphaneStéphane Member, Former PluXml Project Manager
    j'ai pris en compte officiellement dans la config du plugin
    entities: false,
    allowedContent: true
    

    @Beduck: finalement je n'aurais pas besoin de donner mon explication car la solution de Francis avec "allowedContent: true" est largement mieux que ce que j'allais proposer.

    Consultant PluXml

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

  • FrancisFrancis Member
    mai 2015 modifié
    Dernier message pour présenter mes retouches perso dans CKEditor : un peu de ménage, pour alléger l'ensemble CKEditor + les plugins que j'ai ajoutés.

    Allègement de CKEditor :
    - suppression du dossier ckeditor/ckeditor/samples

    Réduction de la taille des plugins inclus dans CKEditor :
    - suppression des langues autres que fr.js, fr-ca.js et en.js dans le dossier lang (ou dialogs/lang) de chacun des plugins concernés
    => dans a11yhelp, justify, oembed, showblocks, specialchar, widget (plugins de base)
    et dans button, codemirror, colorbutton, find, font (plugins que j'ai ajoutés)

    Suppression de fichier inutiles dans fileman :
    - fileman/js/jquery-1.11.1.js et fileman/js/jquery-2.1.1.js
    - images d'exemples dans fileman/Upload/Images/

    Voilà c'est tout, mais [del]cétacé[/del] c'est assez quand même ! :)
    Pour info et pour récapituler, revoilà le lien de ma version personnalisée de CKEditor, avec toutes les modifs que j'ai présentées au fil de ces derniers messages, hier et aujourd'hui.

    En tout cas, avec cette nouvelle version de CKEditor facilement personnalisable (la nouvelle interface n'est pas très colorée, mais on va dire que ça fait pro !) et son explorateur de fichiers Roxy Fileman, on a maintenant un éditeur vraiment complet, digne de notre PluXml ! :D
  • J'ai remarqué un bug sur ckeditor lorsqu'on est en local sans accès internet : le plugin tente de télécharger jQuery via les cdn de google. Forcément, ça plante.
    De plus, si on modifie pour avoir une version locale de jQuery, il arrive parfois que les options de ckeditor "plantent" (si on affiche par exemple la source et que l'on revient à l'affichage formaté, on ne peut plus se servir des autres boutons, comme mettre en gras, chercher une image sur le serveur, etc.).

    Je n'ai pas eu le temps de trop chercher d'où ça peut venir.

    Je précise que c'est la dernière version disponible sur le github de pluxopolis que j'utilise sur le dernier pluxml disponible également via le lien de la page d'accueil de pluxml.org.
Connectez-vous ou Inscrivez-vous pour répondre.