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

Sudwebdesign · mars 2019

Editeur wysiwyg + gestionnaire de fichier natif + CKEditor 4.14.1 + 8 thèmes + codemirror

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

## 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

cpalo · mars 2019

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

Sudwebdesign · mars 2019

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

Sudwebdesign · mai 2019

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

Alba · juin 2019

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.

cpalo · juin 2019

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

Sudwebdesign · juin 2019

https://forum.pluxml.org/discussion/comment/58970#Comment_58970

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?

cpalo · juin 2019

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.

Sudwebdesign · juin 2019

@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

cpalo · juillet 2019

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;

Sudwebdesign · août 2019

https://forum.pluxml.org/discussion/comment/59135#Comment_59135

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'

Sudwebdesign · juillet 2020

Slt a vous,

Il est maintenant dispo en v1.1.1 (CKeditor 4.14.1 + codemirror 5.56.0)

Franck-AWO · mai 2021

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 !

Francis · septembre 2021

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 !

gcyrillus-nomade · septembre 2021

@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

cpalo · septembre 2021

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

Francis · septembre 2021

@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

gcyrillus-nomade · septembre 2021

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

Francis · septembre 2021

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

gcyrillus-nomade · septembre 2021

@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

Francis · septembre 2021

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

gcyrillus-nomade · septembre 2021

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

Franck-AWO · décembre 2021

Hello,
J'ai (fini par) masqué la notification de sauvegarde automatique (qui s'affichait dans la zone d'éditeur).
$ vim Cmixml.php
/cke_notifications_area
$ grep -r cke_notifications_area Cmixml.php
.cke_dialog_background_cover,.cke_notifications_area{z-index:1000001!important;display:none}
a+

cpalo · janvier 2022

Bonsoir,
Je croyais effectivement que CKEditor 4 n'était plus développé et devoir passer à la version 5.
Mais je viens de télécharger la version 4.17.1 du 27 novembre 2021 ( https://ckeditor.com/ckeditor-4/download/.
Et les versions 4.17.2 et 4.18.0 sont en cours de développement (https://github.com/ckeditor/ckeditor4/blob/master/CHANGES.md
Alors cela relance mon intéret pour ce plugin car entre autre il a les outils insérer un bloc ou insérer une div, et me permettrait de ré-utiliser mon fichier custom.

gcyrillus-nomade · janvier 2022

Bonnes nouvelles !!

Aprés quelques recherches sur des forums anglophones j'avais relégué cette infos suite à quelques posts et témoignages d'utilisateurs dépités:

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

Comme quoi, rien n'est jamais certain

cpalo · janvier 2022

Lorsqu'on remplace le dossier ckeditor du plugin par une une des nouvelles versions,:

ne pas oublier de rajouter le plugin codemirror
la barre d'outils ne s'affiche pas; on ne peut donc pas utiliser ckeditor alors qu'il est actif ( le bouton masquer fonctionne bien)

entropie · janvier 2022

Salut, j'ai installé le plugin en version 4.14.1 que j'ai trouvé ici http://sudwebdesign.free.fr/index.php?article19/cmixml-un-plugin-wysiwyg-pour-pluxml-ckeditor-lts-codemirror

Alors ça fonctionne bien, c'est vraiment top, mais il y a un petit bug quand je redimensionne la fenêtre de rédaction

Il y a tout le bloc de rédaction qui vient se décaler à gauche

est-ce que ça vous le fait aussi ?

entropie · janvier 2022

En fait je me rends compte que ce "bug" ne se produit qu'avec le thème CKEditor : Flat, car celui-ci autorise de redimensionner la fenêtre de rédaction en largeur, et c'est à ce moment que ça bug.

cpalo · janvier 2022

Avec cette version que j'utilise aussi, ça fonctionne.
le problème que j'ai c'est pour à mettre à jour le dossier ckeditor du plugin.

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

Réponses