[plugin] CKEditor: editeur wysiwyg

11213141517

Réponses

  • J'ai testé une installation de PluXml avec simplement le plugin CKEditor auquel j'ai ajouté l'addon image2 : ça marche très bien, l'interface d'insertion d'image propose bien une case à cocher "Image légendée".

    J'ai fait un zip de cette installation que tu peux télécharger ici (identifiant : admin / mot de passe : admin).
  • Grand merci
    cela fonctionne aussi de mon côté. J'ai comparé ta version à la mienne mais pas vu la différence..
    Par contre "etourderie" de ma part : si je veux la balise figure, il faut que je coche nécessairement image légendée (ce que je n'avais pas fait)
    Cordialement
  • cpalocpalo Member
    novembre 2017 modifié
    Bonjour,
    Dans les propositions pour faire évoluer le plugin, et de faciliter les mises à jour et ou les personnalisations, ne serait-il pas possible d'utiliser un fichier de configuration perso et non pas le fichier config.js
    custom figuration file
    Par exemple:
    [== Indéfini ==]
    CKEDITOR.replace('id_'+n, {
        customConfig: '/custom/ckeditor_myconfig.js'
    });
    
    Où placer ce dossier custom : à la racine du plugin ? à la racine de ckeditor?
    Et dans ce dossier on pourrait très bien imaginer la possibilité d'avoir plusieurs fichiers de configuration dont on pourrait se servir suivant le type d'utilisation de pluxml, en modifiant simplement la ligne ci-dessus : myconfig1, myconfig2 etc..;
    Bon dimanche
  • Ça existe déjà, mais sous une autre forme.
    Dans le fichier ckeditor/config.php, la partie
    [== JavaScript dans PHP ==]
    <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++) {
    		var n = textareas[i].name;
    		if(n=="content" || n=="chapo") {
    			CKEDITOR.replace('id_'+n, {
    				extraPlugins: 'justify,showblocks,embed,embedbase,lineutils,widgetselection,widget,notification,notificationaggregator,toolbar<?php echo $extraPlugins ?>',
    				<?php echo $height ?>
    				scayt_autoStartup: true,
    				extraAllowedContent: 'video[*]{*}',
    				filebrowserBrowseUrl: roxyFileman,
    				filebrowserImageBrowseUrl: roxyFileman+'&type=image',
    				removeDialogTabs: 'link:upload;image:upload',
    				entities: false,
    				allowedContent: true,
    				language : '<?php echo $this->default_lang ?>'
    			});
    		}
    	}
    }
    -->
    </script>
    
    sert à compléter le fichier ckeditor/ckeditor/config.js, avec possibilité de redéfinir certains paramétrages.

    Par exemple, sur ma version perso j'ai modifié la fin de cette partie de la façon suivante :
    [== JavaScript dans PHP ==]
    	language : '<?php echo $this->default_lang ?>',   // ajout d'une virgule à la fin, pour écrire des lignes supplémentaires
            removeButtons: 'Styles',    // redéfinit config.removeButtons = 'Underline,Subscript,Superscript'; pour rétablir "souligné/indice/exposant" et supprimer "Styles"
            format_tags: 'p;h1;h2;h3;h4;h5;h6;pre'   // redéfinit  config.format_tags = 'p;h1;h2;h3;pre'; dans ckeditor/config.js
    
    On retrouve aussi en PHP l'ajout des plugins déclarés dans la configuration du plugin, ainsi que de la hauteur par défaut de la fenêtre d'édition.
  • Oui j'ai bien vu cela et cela permet assez facilement de modifier certains parametres. Mais lorsqu'on fait une mise à jour du plugin ou simplement de ckeditor, il faut bien penser à sauvegarder ces deux fichiers car ils seront remis à jour ( pas compliqué, mais ne pas oublier).
    Par contre avec l'autre méthode on n'aurait pas à gérer la configuration personnalisée lors des mises à jour ( à quelques détails près sans doute).
    Et l'autre avantage on pourrait avoir plusieurs modeles de configuration qu'on pourrait appeler en modifant seulement
    CKEDITOR.replace('id_'+n, {
        customConfig: '/custom/ckeditor_myconfig_1.js'
    
    Alors j'avais envie de tester de cela, d'où ma demande de conseil pour le mettre en place.
  • Je comprends ce que tu voulais dire.
    Effectivement l'idée est intéressante.
  • cpalocpalo Member
    novembre 2017 modifié
    Bonsoir,

    J'ai bien avancé dans la personnalisation de ckeditor, mais je bute sur un point celui des chemins à indiquer.
    Dans la doc il est est indiqué :
    // Load a specific configuration file.
    CKEDITOR.replace( 'myfield', { customConfig: '/myconfig.js' } );
    
    Lorsqu'il est indiqué ceci, myconfig.js est dans quel répertoire?
  • Si on enlève le slash de la racine "/", ça pourrait être le même dossier que celui de ckeditor.php, c'est-à-dire plugins/ckeditor, à vérifier.
    Dans ckeditor.php, j'ai ajouté cette ligne pour étoffer la liste des caractères spéciaux, que j'ai complétée dans un fichier ckeditor-modif-specialchars.php :
    [== PHP ==]
    <?php include('ckeditor-modif-specialchars.php'); /* Caractères spéciaux personnalisés, pour davantage de choix */ ?>
    
    Sinon, on peut s'inspirer de la ligne :
    [== JavaScript dans fichier PHP ==]
    var roxyFileman = '<?php echo PLX_PLUGINS ?>ckeditor/fileman/index.html?integration=ckeditor';
    
    où <?php echo PLX_PLUGINS ?>ckeditor/ nous donne le dossier de base de ckeditor.
  • cpalocpalo Member
    novembre 2017 modifié
    Si j'ai :
    plugins/ckeditor/ckeditor/myconfig.js
    il faut ajouter dans ckeditor.php:
    customConfig: 'myconfig.js',
    
    ou
    plugins/ckeditor/ckeditor/custom/myconfig.js
    customConfig: 'custom/myconfig.js',
    
    ou
    plugins/ckeditor/custom/myconfig.js
    customConfig: '../custom/myconfig.js',
    
    C'est cette dernière configuration que j'ai retenue. Dans ce dossier custom j'y mettrai aussi mon fichier de styles personnalisés.
  • C'est donc un répertoire plus bas que ce que je pensais.
    Merci en tout cas Cpalo pour l'info et pour l'astuce.

    Le principe est intéressant, pour personnaliser CKEditor sans avoir à modifier ckeditor.php

    Pour la feuille de style, je suppose que ça permet de voir la mise en forme directement sur la page Wysiwyg, en copiant les styles importants du fichier css du thème ?
  • cpalocpalo Member
    novembre 2017 modifié
    Oui exactement c'est ce que j'essaie de faire, mais je butte sur un petit détail par rapport à l'emplacement de contentCss. Mais je vais y retravailler la semaine prochaine.

    Sinon la mise à jour de la 4.7.3 se fait sans aucun problème; il suffit juste de remplacer le dossier ckeditor dans le plugin par le nouveau; et le plugin continue à fonctionner.
    Pareil l'installation de codemirror se fait tout seul et offre un mode source sympa.

    http://origin-docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-contentsCss

    https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_styles

    https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-stylesSet

    Une fois que j'aurai réglé ces styles pour que CKEditor affiche le contenu dans le style du site, je pense travailler sur deux plugins :
    - afficher une galerie (dans un template de page prévu à cet effet)
    - insérer un bloc de contenu annexe

    Bon dimanche
  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 4.7.3 (28/11/2017) ##
    [+] Mise à jour ckeditor 4.7.3 standard et de ces plugins additionnels
    Roxyfileman 1.4.5 http://www.roxyfileman.com/
    Justify Plugin 4.7.3 http://ckeditor.com/addon/justify (justify)
    Line Utilities 4.7.3 http://ckeditor.com/addon/lineutils (lineutils)
    Media Embed 4.7.3 https://ckeditor.com/addon/embed (embed)
    Media Embed Base 4.7.3 https://ckeditor.com/addon/embedbase (embedbase)
    Notification 4.7.3 https://ckeditor.com/addon/notification (notification)
    Notification Aggregator 4.7.3 https://ckeditor.com/addon/notificationaggregator (notificationaggregator)
    Show Blocks 4.7.3 http://ckeditor.com/addon/showblocks (showblocks)
    Widget 4.7.3 https://ckeditor.com/addon/widget (widget)
    Widget Selection 4.7.3 https://ckeditor.com/addon/widgetselection (widgetselection)
    FIX Various contributions by sudwebdesign

    Consultant PluXml

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

  • Bonjour,

    Un grand merci pour la suivi des versions de CKEditor !
    Aucun soucis pour mise à jour, même avec des styles et paramètres personnalisés : c'est parfait !
  • nixmlnixml Member
    avril 2018 modifié
    Bonjour,

    Je suis en train de mettre en place un site pour le compte d'une association, on m'a demandé quelque chose qui ne soit pas une usine à gaz, j'ai donc pensé à PluXml :)

    Je n'ai encore jamais utilisé ce CMS à titre personnel, je ne le connais donc pas super bien, mais je l'apprécie déjà beaucoup pour sa légèreté et sa simplicité.

    Comme le site va être géré par des non-informaticiens, j'ai ajouté un éditeur pour qu'ils n'aient pas à se taper le HTML à la main. J'ai commencé avec TinyMCE mais j'ai basculé rapidement sur ckEditor, beaucoup plus complet de base, et que je connais mieux pour l'utiliser dans un blog dotClear.

    Bref, j'en viens au problème qui m'a fait m'inscrire sur ce forum: je rencontre un petit bug pour lequel je n'ai pas vraiment de solution. Quand on créée deux liens sur la même ligne, qu'il y a un accent dans le texte du premier et que le deuxième est un lien "mailto:", l'accent du premier lien est encodé dans ce qui ressemble à de l'ISO-8859 (é devient é). Au niveau du code HTML, le lien est transformé en "<script>eval(unescape('....'))</script>", ce qui vient peut être de ça :)

    Cela n'arrive pas quand le lien mailto: est en premier, ou si les deux liens sont sur deux lignes différentes. En basculant sur TinyMCE et en sauvegardant la page, cela règle le problème d'accents, ce qui me fait penser que la cause est soit ckEditor, soit le plugin. J'ai essayé la version précédente du plugin, et également de basculer sur la dernière version de ckEditor, sans succès pour l'instant.

    Une idée ? avez-vous déjà eu ce problème ?

    Versions utilisées: PluXml 5.6, plugin ckEditor 4.7.3.

    Edit du lendemain: je viens de me rendre compte que la cause semble plus à chercher du coté du plugin MyProtectEmails...en le désactivant plus de problèmes de caractères spéciaux. Problème résolu donc, même si ça m'embête un peu de laisser les adresses e-mails toutes nues ;)
  • cpalocpalo Member
    avril 2018 modifié
    Bonjour,

    Ce post pour livrer le résultat de ma personnalisation du plugin ( cf posts précédents ou échanges avec Francis en particulier)
    Première étape : Création d'un dossier custom dans le dossier ckeditor du plugin et on y met ses fichiers de configuration (pour commencer on peut faire la copie des fichiers utilisés par défaut situés dans ckeditor/ckeditor):
    ckeditor
    ckeditor
    ckeditor.js
    config.js
    contents.css
    styles.js
    custom
    myconfig.js
    mycontents.css
    mystyles.js
    ckeditor.php
    Seconde étape, la seule qu'il faudra refaire à chaque mise à jour du plugin pluxml ckeditor :
    dans le fichierckéditor.php, rajouter customConfig:
    CKEDITOR.replace('id_'+n, {
        customConfig: '../custom/myconfig.js',
    	extraPlugins: 'justify..........
    
    Ensuite modifier myconfig.js en rajoutant :
    // Applique les styles dans l'éditeur
    config.stylesSet = 'my_styles:/plugins/ckeditor/custom/mystyles.js';
    // Applique le Css du site
    config.contentsCss = '/plugins/ckeditor/custom/mycontents.css' ;
    // ou sous cette forme
    //config.contentsCss = 'http://nomdusite.fr/plugins/ckeditor/custom/mycontents.css'
    
    Et enfin modifier le fichier mystyles.js pour remplacer le nom defaut par my_styles
    CKEDITOR.stylesSet.add( 'my_styles', [
    

    Je suis preneur pour améliorer ceci. Mais ça fonctionne.
  • Je n'ai pas encore eu le temps de tester cette méthode, mais elle m'a l'air bigrement intéressante.
    Merci bien cpalo !
  • chantoinechantoine Member
    août 2018 modifié
    petitchevalroux a écrit:

    Le second : la taille des images est précisée en css du type style="width:640px;height:480px" hors en responsive c'est la misère à gérer vu que le css est surchargé par celui inséré dans le code html.

    J'ai parcouru le fil jusqu'ici pour trouver une confirmation de mes recherches de cet après midi.

    J'avais en effet un souci avec les images de mes articles en mode petit ecran, déformées. Je suis allé fouiller dans les CSS en vain, avant de voir qu'il fallait que je reprenne les images une par une en faisant disparaître les éléments de taille dans ckEditor.

    Il est dommage que les éléments de taille soient saisis par défaut par ckEditor amha.
  • Une solution consiste à écrire dans la feuille de styles :
    [== CSS ==]
    img { width: auto !important; height: auto !important; }
    
    Ces styles sont alors prioritaires par rapport aux styles en ligne.
  • Génial, merci :P
  • SudwebdesignSudwebdesign Member
    mars 2019 modifié
    Slt @ Tou(te)s,
    [edit] cette version est bogué, il y a maintenant Cmixml, dites moi ce que vous en pensez ;)
    ckeditor-4.11.1_PHP est sorti du labo ;)
    il est à télécharger ici ou dans mon dépôt
    [edit][del] Non pour le moment, le temps que je trouve la panne :) [/del]
    [edit2]
    L'erreur venais du fait que free limite la lecture de fichier a 1Mo (readfile, fopen, get_file_content)

    Journal d’évolution :
    [+] Mise à jour ckeditor 4.11.1
    [+] Mise à jour du plugin code mirror avec la branche master (11/11/2018) Plugin upgraded to CodeMirror 5.41.0 ::: https://github.com/w8tcha/CKEditor-CodeMirror-Plugin/commit/0c20128cc1a956e6beda39566ecfa6de53e0c2fe
    [+] Il est possible de déposer des images (elles sont téléversées dans le dossier data/media/blob_ck)
    [+] plugin autosave et mise en place du onbeforeunload
    [+] info.xml : <scope>admin</scope>
    [+] config des icônes commenté (utilise celle par défaut de CKEditor)

    @plx

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

  • SudwebdesignSudwebdesign Member
    mars 2019 modifié
    Slt @ Tou(te)s, il y avait une coquille, impossible d'ouvrir le téléverseur de médias :/

    C'est corrigé et un peu plus... [edit] mais pas assez, il y a maintenant Cmixml, dites moi ce que vous en pensez ;)
    [h]ckeditor-4.11.1-1_PHP est à télécharger ici ou dans mon dépôt [/h]

    Journal d’évolution :
    ## Version 4.11.1-1 PHP #sudwebdesign (22/12/2018) ##
    [+] Hooks abs2rel : echo2HardText
    Fix : chez free.fr le fichier "codemirror.mode.php.min.js" est en accés refusé : renommé en codemirror.mode.php_min.js (avec underscore "_") et ça passe, voir (2) ;)
    Fix : Imposible d'ouvrir la page d'envois des médias

    @plx & BFDFA


    Et pour répondre a 2 questions qui m'ont était posé par courriel :
    Annonyme a écrit:
    1·Merci pour votre travail

    Souhaitant ajouter quelques fonctionnalités à l'éditeur, j'ai télécharger les plugins et leurs dépendances sur le site dont le lien est dans l'administration du plugin sous PluXml.
    J'ai ajouter la ligne "tableresize, simage, lineheight, font, richcombo, button, floatpanel, listblock, panel"

    2·La hauteur de ligne, le redimensionnement des tableaux fonctionnent mais impossible d'avoir les fonts et leurs tailles.

    3·Avez-vous réussi à les faire fonctionner avec le plugin ckeditor sous 5.7 ?
    1·de rien ;)

    2·Si certain d'entre vous ont la réponse, je n'ai point testé

    3·Oui, il tourne bien de pluxml 5.2 à 5.7 ;)

    4·d'ailleur en y regardant de plus près il y a une incompatibilité avec le plugin maxiContact (Le message du courriel est absent lors d'une réponse car ckeditor en remplace le textarea) #todo?

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

  • Bonjour et merci d'avoir repris le flambeau après le départ de Stéphane :) !

    J'ai voulu mettre à jour CKEditor, en passant par l'extension jpbMultidepots. Malheureusement, bien que celui-ci ne l'affiche pas, j'ai bien CKEditor dans le répertoire plugins/ mais il n'apparaît pas dans la liste des plugins, ni actif, ni non-actif. Et pourtant jpbMultidepots me l'indique comme étant installé, du coup, je ne sais pas si le problème vient du plugin CKEditor ou si je dois signaler le souci à l'auteur de jpbMultidepots.
    Est-ce que j'ai raté une étape ?
    Toutes mes excuses si je ne poste pas mon problème au bon endroit :8 !

    Voici quelques captures d'écran pour illustrer mon souci :

    Ici on voit que le plugin a été installé :
    qtKJe83lpDfe.png

    Mais il n'apparaît pas dans la liste des plugins installés par l'extension :
    oif3We848dx6.png

    Pas plus que dans la liste des plugins actifs :
    EUS5IqfcthZU.png

    Que dans la liste des plugins inactifs :
    ApCfQD7OHGji.png

    Et pourtant il est bien dans le répertoire :
    XZEgy0IRwiFX.png

    Encore merci pour tous vos efforts fournis pour que nous puissions bénéficier de bons outils pour notre PluXML adoré {) !
  • @Norore et plus ;)

    Il suffit juste de renommé le dossier "ckeditor-sudwebdesign" en "ckeditor" et tout devrai rouler ;)

    cela viens de la manière dont PluXml charge les plugin, mème si le dossier est présent, il doit avoir le même nom que le fichier du plugin, pour le cas présent, le plugin de Stéphane et le mien ont la même classe, c'est a dire "ckeditor". Il est possible que Jack31 est fait ainsi pour éviter quelques conflits...


    @Jack31 est-il judicieux que la prochaine (présente) mouture change de nom de classe, donc de dossier = moins de conflits, c'est bien ça?

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

  • Sudwebdeign a écrit:
    @Jack31 est-il judicieux que la prochaine (présente) mouture change de nom de classe, donc de dossier = moins de conflits, c'est bien ça?

    Je pense que oui car la confusion est frèquente entre "ckeditor-sudwebdesign" et "ckeditor" et, ce dernier étant considéré comme un plugin officiel, il ne serait que justice de bien différencier les deux.

    Pour ce qui concerne le problème de Norore, il est possible qu'elle ait installé son plugin via l'onget "Autres" de jpbMultidepots qui contient, cela a été dit par ailleurs, des plugins en vrac pas nécessairement à jour.

    ...Alors que le système affiche justement directement les plugins mis à jour des dépôts des concepteurs du moins ceux compatibles avec les systèmes de Stéphane et Evrard.

    Donc, télécharger ailleurs que là ou directement des dépôts des constructeurs est un risque de troubles potentiel dont on se passerait bien d'autant plus qu'il est si facile maintenant de normaliser la situation.
  • Merci beaucoup pour vos explications, elles m'ont bien aidé :) !
    Désolée pour le dérangement :8 !
  • Bonjour SudWebDesign !

    C'est juste pour te signaler un problème lié aux médias avec ton plugin. S'il est actif, on ne peut plus envoyer de fichiers sur le blog !
    J'en ai parlé ici : https://forum.pluxml.org/viewtopic.php?pid=58469#p58469
  • Bonjour,

    J'ai installé ckeditor-4.11.1_PHP SudWebDesign et, pour pouvoir modifier le thème, il faut désactiver ce plugin. Il y à également un soucis lors du click droit sur un mot mal orthographié, c'est le menu copier-couper-coller qui apparaît à la place du correcteur.

    Merci pour votre travail.
  • @roldata et @Nonore, oui et il est déjà corrigé, [post=58180]ici (#502)[/post]
    comment ce fait-il que vous ayez la v4.11.1_PHP qui a la coquille 8o
    Alors qu'il est sortie la v4.11.1-1_PHP qui n'a plus cette coquille ;)

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

  • cpalocpalo Member
    mars 2019 modifié
    Bonsoir,

    Un petit bug...
    Lorsqu'on insère une image, ci-dessous le lien qu'il attribue
    ../../data/medias/image.jpg
    Lorsqu'on est dans l'éditeur, l'image s'affiche bien dans l'article.
    Mais lorsqu'on passe dans la partie publique, là elle n'est plus visible;
    Mais si on corrige manuellement le lien en :
    /data/medias/image.jpg
    Plus de problème, elle s'affiche bien

    Est-ce que cela pourrait se situer vers la ligne 190?
    public function Abs2Rel() {
    public function Rel2Abs() {

    Cordialement
  • SudwebdesignSudwebdesign Member
    mars 2019 modifié
    @cpalo, oui c'est probable, je verrai cela plus tard ou si quelqu'un a une soluce ;)

    Car je viens de mettre a dispo un nouveau plug Cmixml, dites moi ce que vous en pensez ;)

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

Connectez-vous ou Inscrivez-vous pour répondre.