[plugin] Cmixml: CKEditor full, codemirror et insert médias natif

SudwebdesignSudwebdesign Member
juillet 2020 modifié dans Plugins
Editeur wysiwyg + gestionnaire de fichier natif + CKEditor 4.14.1 + 8 thèmes + codemirror

Téléchargement ici et un peu d'info

## Version 1.1.1 - CKeditor 4.14.1 + PHP in static on 11 langs (21/07/2020) ##
[+] CKeditor 4.14.1 full + 7 thèmes + Plugin CodeMirror 1.17.14 (+up CodeMirror 5.54.0 >>> 5.56.0) [from master & up cm](https://github.com/w8tcha/CKEditor-CodeMirror-Plugin/commit/896d353d1674733364b0792bbe338151750d4f65)
[+] Config : constantes de langues prévus pour les prochaines générations de PluXml (après 5.8x)
[+] ajax_upload_init.php : retouches pour tourner avec les prochaines générations de PluXml (après 5.8x)
[+] ajax_upload_init.php : auto détecte si est dans un dossier symbolique (par contre s'il se trouve ds un autre pluxml, il peut se faire tromper)
[+] Config : choix des Skins de CK dynamique (sont extrait des dossiers ckeditor/skins/)
[+] Config : choix des thèmes pour codemirror dynamique (sont extrait des dossiers ckeditor/plugins/codemirror/theme/)
[+] Langues retouchées
[+] z-index .cke_dialog_container (inline style) : Fix boites de dialogues impossibles a utilisées (derrières le fond blanc translucide)
```
.cke_dialog_container,.cke_dialog{z-index:1000002!important}
```
* Note : videodetector : aucune icônes ds la barre
* NoOk & supprimés : soundPlayer,videoembed,Audio,imgUpload


## Version 1.1.0 - CKeditor 4.11.4 + PHP in static (22/05/2019) ##
[+] CKeditor 4.11.4 full + 7 themes + Plugin CodeMirror 1.17.12.pre+1 (CodeMirror 5.46.0)
[+] plugins ck : removeRedundantNBSP,entities,html5video,html5audio
fix flat skin.js
fix no notif in fullscreen : inline css .cke_notifications_area{z-index:1000001!important} : (autosave)
[+] minimalist theme
[-] flat theme
fix media mngr funks to activate html5 audio & video plugs (retail by me browser url + lng in video) +
extraAllowedContent: 'audio[*]{*};video[*]{*}',
[+] https://github.com/w8tcha/CKEditor-CodeMirror-Plugin/commit/c3e1001c298c3f2e481fbe6510fdfa0456ce0696 (not for static)
[+] config : Activer ckeditor pour des pages spécifiques


## Version 1.0.0 - CKeditor 4.11.3 + PHP (13/03/2019) ##
[+] CKeditor 4.11.3 full + 7 themes + Plugin CodeMirror 1.17.10 (CodeMirror 5.44.0)
[+] 11 langues
[+] config : création du dossier blob_ck
[+] Pour l'insert d'image on utilise le gestionnaire des médias natif de PluXml
[+] Hooks abs2rel >>> urls2Root & toRoot

Notre temps est la seule monnaie vraie ;)

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

Réponses

  • cpalocpalo Member
    Bonjour,

    premier contact... pas mal - testé avec la 5.8 dev
    Je vais donc y ajouter maintenant mon dossier custom, ce qui pourrait etre fait par défaut et ce qui simplifierait les maj

    Petite question, c'est quoi ce dossier ;[+] config : création du dossier blob_ck

    Cordialement
  • SudwebdesignSudwebdesign Member
    mars 2019 modifié
    cpalo a écrit:
    Bonjour,

    premier contact... pas mal - testé avec la 5.8 dev
    Je vais donc y ajouter maintenant mon dossier custom, ce qui pourrait etre fait par défaut et ce qui simplifierait les maj

    Petite question, c'est quoi ce dossier ;[+] config : création du dossier blob_ck

    Cordialement

    C'est le dossier data/medias/blob_ck ou sont envoyées les images drag&dropées.

    Comme avec CKeditor il est possible de lui glisser et déposer des images dans son interface.
    Au lieu d'être transformée en url BASE64 et alourdir le html (c'est le comportement par défaut de CK), elles sont automatiquement téléversé dans le dossier data/medias/blob_ck (Voir les fichiers php ajax_upload* du plugin)

    En plus il tourne sur la 5.8, merci du retour :)


    Ps : je viens de relire mon code et en réalité ce dossier est créé lors de la première image téléversée par le fichier ajax_upload.php, ligne 71
    [== PHP ==]
        if(!is_dir($absoImageFolder)) mkdir($absoImageFolder);// if not, create upload folder
    
    Pardon pour la confusion, J'aurais du écrire
    [+] ajax upload : création du dossier data/medias/blob_ck

    Notre temps est la seule monnaie vraie ;)

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

  • Slt @vous,

    une nouvelle mouture est dispo ds le dépôts

    Version 1.1.0 - CKeditor 4.11.4 + PHP in static + htm5 audio et vidéo plugin.

    Voir le 1er post pour plus de détail et le télécharger

    Notre temps est la seule monnaie vraie ;)

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

  • AlbaAlba Member

    Hello, concrètement, on retrouve le gestionnaire de fichier de pluxml dans l'éditeur ? c'est top ! il est tellement mieux que celui de ckeditor.

  • cpalocpalo Member

    Bonjour,

    En phase de test par rapport à ta précédente version de CKEditor.

    Petite question... le bouton basculer l'éditeur.

    Fonction que j'apprécie beaucoup et que je trouve plus conviviale que que le menu"source" même s'il y a la coloration avec codemirror.

    Le style est obtenu à partir de quel fichier?

    Merci

    Cordialement

  • SudwebdesignSudwebdesign Member
    juin 2019 modifié

    Slt cpalo, le style qui permet la bascule de l'éditeur est un script (chercher ckToggleEditor ds le fichier Cmixml.php)

    function ckToggleEditor(id) {
    // console.log('ckToggleEditor(id)',id,CKEDITOR.instances);
    /*
    for(var i in CKEDITOR.instances) {
      console.log('each',i,CKEDITORAPI.GetInstance(i));
    
    	}
    */
    
    	var ta = document.getElementById(id);//textarea
    	//~ var ck = document.getElementById('cke_'+id);//.ckeditorGet();//;//editeur
    	//~ console.log('ckToggleEditor(ck)',ck,ck.style.display);//editeur
    //	console.log('ckToggleEditor(ta)',ta,ta.style.display);//textarea
    	if(ta.style.display == 'none'){
    //		console.log('ckToggleEditor(id) OFF',id);
    //		console.log('CKEDITOR.instances',CKEDITOR.instances[id]);
    		CKEDITOR.instances[id].destroy()
    	}else{
    //		console.log('ckToggleEditor(id) ON',id);
    		ckeInit(id);//CKEDITOR.replace(id); one with opts
    	}
    }
    

    Le voici nettoyé:

    function ckToggleEditor(id) {
    	var ta = document.getElementById(id);//textarea
    	if(ta.style.display == 'none'){
    		CKEDITOR.instances[id].destroy();
    	}else{
    		ckeInit(id);//CKEDITOR.replace(id); one with opts
    	}
    }
    

    Il est appelé a chaque clic (onclick) de chaque boutons.

    Est ce bien cela le but de ta question?

    Notre temps est la seule monnaie vraie ;)

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

  • cpalocpalo Member

    Bonjour,

    Ce n'est pas tout à fait ça ma question même si tu y réponds en partie.

    Je preferre utiliser ce bouton plutôt que le menu source de la barre d'outil.

    En effet je trouve que c'est agréable à saisir et surtout cette mise en forme (d'où ma question sur où se trouve le css en question)

    Et ma seconde remarque était qu'avec ce mode basculer, je n'ai plus vraiment besoin du menu source.

  • SudwebdesignSudwebdesign Member
    juin 2019 modifié

    @cpalo AMHA c'est la "magie" de CK, s'il y a un expert de cet éditeur ds le coin...

    Au passage si vous souhaitez régler les objets (boutons) de la barre, chercher ds Cmixml.php

    extraPlugins:

                extraPlugins:'removeRedundantNBSP,entities,html5video,html5audio,showprotected,textmatch,autosave,autolink,notification,notificationaggregator,save,codemirror,uploadimage,justify,showblocks,embed,embedbase,embedsemantic,autoembed,lineutils,widgetselection,widget,toolbar<?php echo $extraPlugins ?>',
    

    ou toolbarGroups

    				toolbarGroups: [
    ...
    ".($_SESSION['profil']<PROFIL_MODERATOR?"               {name:'admin',   groups:['mode','doctools']},":'')."
    ...
    

    pour faire rapide Il suffit de commenter le groupe "admin" et codemirror (le mode source) disparaitra de CK ;)

    				toolbarGroups: [
    ...
    ".($_SESSION['profil']<PROFIL_MODERATOR?"//               {name:'admin',   groups:['mode','doctools']},":'')."
    ...
    

    et comme on dit qui peut le plus peut le moins.

    Ravis qu'il vous plaise car il est expérimental, comme tout ds ce monde et l'éditeur du nouveau forum qui disparait parfois après un arobase pseudo et appuis sur la barre d'espace ou certains ctrl+z ou ctrl+y

    @plx

    Notre temps est la seule monnaie vraie ;)

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

  • Bonsoir

    Est-ce que le code ci-dessous signifie qu'il y un ckeditor different suivant le profil de l'utilisateur et ou suivant le mode d'affichage ( statique vs article?

    $toolbarGroups="
                toolbarGroups:[
                   {name:'document',   groups:['tools','document']},
    ".($_SESSION['profil']<PROFIL_MODERATOR?"               {name:'admin',   groups:['mode','doctools']},":'')."
                   {name:'board',   groups:['clipboard','undo','find','selection']},
                   {name:'editing',   groups:['links','insert','others']},
    ".(($mode=='statique'OR$mode=='parametres_edittpl')?"               {name:'forms'},":'')."
                         '/',
                   {name:'paragraph',   groups:['br','list','align','basicstyles']},
                   {name:'style',   groups:['styles','colors','cleanup']}
                ],".PHP_EOL;
    
  • Bien vu Oui c'est bien ça ;)

    Pour les gestionnaires et plus le groupe d'outils 'admin' s'active (codemirror entre autre)

    $_SESSION['profil'] < PROFIL_MODERATOR
    


    Pour les pages statiques (gestionnaire & plus) et la page de modif* des fichiers du thème s'ajoute aussi le groupe 'form' (pour aider a la création de formulaire html). *Est accessibles aux administrateurs (et gestionnaire?)

    $mode=='statique' OR $mode=='parametres_edittpl'
    


    Notre temps est la seule monnaie vraie ;)

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

  • Plusieurs jours que j'utilise Cmixml 1.1.1. sur PluXml version 5.8.2 (encodage UTF-8) - Version de PHP : 7.4.8.
    Et ça maaarche :)
    Merci !

  • FrancisFrancis Member

    Bonjour,

    Je rencontre deux problèmes avec Cmixml :

    1) J'ai installé les plugins indent et indentblock, j'ai mis les dossiers correspondants dans le dossier plugins, et je les ai ajoutés dans la liste extraPlugins de la configuration.
    Et pourtant, je ne vois pas apparaître les boutons correspondants dans la barre d'outils.
    Quelqu'un a-t-il une idée ?

    2) D'autre part, on ne voit pas les images au format .webp, quand on veut insérer une image
    Est-ce que c'est lié à la version de CKEditor utilisée, y a-t-il une méthode pour régler cet autre problème ?

    Merci d'avance à tous ceux qui auraient une idée !

  • @Francis regarde dans le fichier ajax_upload.php à la ligne 44 et ajoute l'extension manquante pour tes fichiers webp. Elle ne fait pas partie des extensions autorisées par défaut.

    Cdt

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • cpalocpalo Member

    @Francis
    Bonjour
    Pourras-tu me dire si de ton côté cette modif a réglé le problème.
    Merci

  • FrancisFrancis Member

    @gcyrillus-nomade
    Merci pour l'info, ça paraît logique, il manque bien cette extension webp.
    @gcyrillus-nomade et @cpalo
    Mais après avoir effectué la modification, je ne vois toujours pas le fichier webp que j'ai placé dans mon dossier d'images, cela ne résout pas le problème.

    Et pour l'ajout d'un plugin à ckeditor, comment faire pour l'activer et pour que le bouton correspondant s'affiche dans la barre d'outils (indent par exemple) ? Quelqu'un a-t-il une idée ?

    Bref, mes deux problèmes ne sont pas résolus :/

  • 22 sept. modifié

    Et pour l'ajout d'un plugin à ckeditor, comment faire pour l'activer et pour que le bouton correspondant s'affiche dans la barre d'outils (indent par exemple) ? Quelqu'un a-t-il une idée ?

    Apparemment, soit tu télécharges une version de ckeditor recompilé avec les plugins que tu veux https://ckeditor.com/cke4/builder (pas sur que cette version soit compatible avec le plugin CMixLm ), et si cela ne fonctionne toujours pas, l'idéal serait effectivement de contacter l'auteur du plugin pour se faire une idée précise .

    Pour CKeditor5 , c'est un package installable via node.js https://ckeditor.com/docs/ckeditor5/latest/api/indent.html

    Ce n'est pas aussi simple que PluXml ou il suffit de déposer un plugin dans un dossier. CKeditor fait presque 2 fois la taille de PluXml, en comparaison c'est une véritable usine à gaz ;)

    Effectivement, l'ajout de l'extension "webp" dans ajax_upload.php, à la ligne 44, ne résout pas le problème.
    Ce serait bien d'avoir un plugin Cimxml à jour, pour éviter que chacun doive bidouiller ce plugin.

    Pour le support des fichiers webp, https://forum.pluxml.org/discussion/comment/62126/#Comment_62126 à priori il faudrait il faut faire à la main les modifs nécessaire voir: https://forum.pluxml.org/discussion/comment/62130/#Comment_62130 . (et ne pas oublié de se garder une note dans un coin, ou sur le forum ,des modifs faites au cas ou on à de nouveau besoin de le faire) .L'auteur du plugin n'est pas l'auteur de CKeditor. Mais une MAJ embarquant le dernier CKeditor serait sympa en effet.

    toutes demandes aux dev de CKeditor à propos de la version 4 se solderas avec comme réponse: faites une mise à jour vers la dernière version , la version 4 n'est plus développée. Donc pas le choix, MAJ et intégration en direct sans plugin, ou les mains dans le cambouis en mode archeoDev :)

    Cdt

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • FrancisFrancis Member

    @gcyrillus-nomade Merci pour les infos, mais normalement, le plugin CKEditor de PluXml est prévu pour pouvoir ajouter des plugins de CKEditor.
    C'est d'ailleurs pour cela que dans la configuration de ce plugin, il y a une zone "extraPlugins", pour noter les noms des dossiers de plugins internes à CKEditor qu'on a ajoutés dans le dossier "plugins".
    Ça marchait très bien de cette façon auparavant, avec le plugin CKEditor, mais cela n'a pas fonctionné avec Cmixml.

  • 25 sept. modifié

    @Francis Mea-culpa je ne connais pas vraiment ce plugin.

    Quel est le plugin de CKeditor dont tu parles avec lequel cela fonctionne , il y a apparemment plusieurs versions.

    As tu verifié si il y avait un problème de compatibilité de version de CKeditor avec le plugin ou de dépendance avec un autre plugin qu'il te manque ?

    Cdt

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • FrancisFrancis Member

    @gcyrillus-nomade Je parlais du plugin CKEditor créé par Stéphane, que l'on trouve toujours sur la page des plugins officiels de PluXml, et dont la page est ici : https://ressources.pluxml.org/plugins/CKEditor
    Mais il est basé sur une ancienne version de CKEditor (4.7.3) et il date de novembre 2017, je ne sais pas s'il fonctionne encore avec les dernières versions de PluXml.

  • 26 sept. modifié

    re,
    https://ressources.pluxml.org/plugins/CKEditor fonctionne avec plx 5.8.7 .

    Pour les image webp , recherche les occurrences de l'extension jpg dans les fichiers du repertoire fileman (2 js et un php à priori) et ajoute l'extension manquante :)
    MAJ a effectuées à priori pour les images webp sur les fichiers suivants :

    • mimi-main.js ligne 265 et util.js ligne 141 (Un doublon ? )
    RoxyUtils.GetFileType = function(path){
      var ret = RoxyUtils.GetFileExt(path).toLowerCase();
      if(ret == 'png' || ret == 'jpg' || ret == 'gif' || ret == 'jpeg'|| ret == 'webp')
        ret = 'image';
    
      return ret;
    };
    
    • fichier **function.inc.php ** ligne 170 puis ligne 364
      static function IsImage($fileName){
        $ret = false;
        $ext = strtolower(self::GetExtension($fileName));
        if($ext == 'jpg' || $ext == 'jpeg' || $ext == 'jpe' || $ext == 'png' || $ext == 'gif' || $ext == 'ico'|| $ext == 'webp')
          $ret = true;
        return $ret;
      }
    

    ainsi que ligne 364

    class RoxyImage{
      public static function GetImage($path){
        $img = null;
        $ext = RoxyFile::GetExtension(basename($path));
        switch($ext){
          case 'png':
            $img = imagecreatefrompng($path);
            break;
          case 'gif':
            $img = imagecreatefromgif($path);
            break;
          case 'webp':
        $img = imagecreatefromwebp($path);
        break;
          default:
            $img = imagecreatefromjpeg($path);
        }
    

    ainsi que ligne 215

     static function GetMIMEType($filename){
        $type = 'application/octet-stream';
        $ext = self::GetExtension($filename);
    
        switch(strtolower($ext)){
          case 'jpg':  $type = 'image/jpeg';break;
          case 'webp': $type = 'image/webp';break;
          case 'jpeg': $type = 'image/jpeg';break;
          case 'gif':  $type = 'image/gif';break;
          case 'png':  $type = 'image/png';break;
          case 'bmp':  $type = 'image/bmp';break;
          case 'tiff': $type = 'image/tiff';break;
          case 'tif':  $type = 'image/tiff';break;
          case 'pdf':  $type = 'application/pdf';break;
          case 'rtf':  $type = 'application/msword';break;
          case 'doc':  $type = 'application/msword';break;
          case 'xls':  $type = 'application/vnd.ms-excel'; break;
          case 'zip':  $type = 'application/zip'; break;
          case 'swf':  $type = 'application/x-shockwave-flash'; break;
          default: $type = 'application/octet-stream';
        }
    
        return $type;
      }
    

    Cdt

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

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