[plugin] plxEditor

StéphaneStéphane Member, Former PluXml Project Manager
Éditeur de texte wysiwyg pour PluXml

Plugin disponible ici

Anciennes versions : ici

## Version 1.6 (29/01/2019) ##
FIX: pas d'affichage des icones de la barre d'outils

## Version 1.5.4 (22/03/2017) ##
BUG Problème affichage des smileys
BUG Mauvaise prise en compte de langue dans la traduction de l'éditeur
BUG Mauvaise conversion des liens relatifs/absolus
BUG Affichage images dans les pages statiques
BUG Pas de sauvegarde de la couleur de fond appliquée à du texte

## Version 1.5.3 (01/02/2017) ##
[+] Compatibilité css avec PluCSS 1.2
[+] Align sous forme de liste déroulante

## Version 1.5.2 (27/01/2017) ##
[+] Bouton Citation
[+] Bouton Youtube
[+] Bouton Code
[+] Traduction occitane (contribution Quent-in)
[+] Code html pour affichage image + miniature si selection miniature à partir du gestionnaire de medias (icone image toolbar)

## Version 1.5.1 (14/11/2016) ##
[+] Configuration de l'utilisation de plxEditor avec les pages statiques
[+] Traduction anglaise + diverses améliorations (contribution Deevad)

## Version 1.5 (25/05/2016) ##
[+] Compatibilité PluXml 5.5 (nouvelle gestion du gestionnaire de médias)

## Version 1.4.1 (18/11/2015) ##
[+] Amélioration de l'affichage des fenêtres à partir des icônes de sélection des couleurs/smilies/lien
[+] Pas d'affichage de l'éditeur sur l'écran d'édition des fichiers du thème et de la gestion des commentaires
BUG Mauvais affichage en plein écran (superposition avec la barre d'action)
BUG sous IE11: Impossible d’obtenir la propriété « createRange » d’une référence null ou non définie

## Version 1.4 (12/11/2015) ##
[+] Ajout compteur de mots
[+] Editeur et barre d'outils responsive
[+] Amélioration de l'affichage en plein écran
[+] Zone d'édition redimensionnable (non supportée avec IE http://www.w3schools.com/cssref/css3_pr_resize.asp )
[-] Suppression du codage en dur du chemin des plugins, remplacé par PLX_PLUGINS
BUG Chevauchement de l'éditeur avec la sidebar de droite sur la page de rédaction des articles

## Version 1.3 (13/07/2015) ##
[+] Compatibilité PluXml 5.4

## Version 1.2 (20/10/2011) ##
[+] Bouton pour ajouter des smilies

Consultant PluXml

Ancien responsable du projet (2010 à 2018)

«1

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    publication de la version 1.4

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Merci Stéphane, je trouve cet éditeur sympa à utiliser.

    -- J'ai rencontré un problème d'affichage bloquant quand on le passe en mode "wysiwyg-fullscreen", la partie haute de l'administration "Modification d'un article" reste affichée par dessus avec le thème par défaut, masquant la barre d'outil et donc empêchant un retour en mode normal.

    C'est causé par le z-index 9999 en ligne 88 de core/admin/theme/theme.css

    .section .action-bar { z-index: 9999; }

    en le supprimant, l'article s'affiche correctement en fullscreen.


    -- Bizarrement sous firefox 42.0 la zone d’édition n'est pas redimensionnable, est-ce que d'autres constatent cela ? Et je n'arrive pas à trouver à quel endroit du CSS ça coince.

    A titre personnel, je trouve que la valeur min-height 300px à la ligne 19 de plxeditor/plxeditor/css/plxeditor.css est un peu petite pour un affichage en grande résolution. En la supprimant, la zone d'édition redevient plus agréable à utiliser.

    .iframe { [del]min-height: 300px;[/del] }

    -- D'autre part, pense-tu qu'il serait possible d'afficher une balise "alt" pour chacun des boutons de la barre d'outil (comme avec CKeditor par exemple) ?
  • superbe !!!
    juste ce que je recherchais = merciS
    et pour ckEditor y--a-t-il moyen de faire apparaître également le 'comptage des mots' ?
  • StéphaneStéphane Member, Former PluXml Project Manager
    kowalsky a écrit:
    Merci Stéphane, je trouve cet éditeur sympa à utiliser.

    -- J'ai rencontré un problème d'affichage bloquant quand on le passe en mode "wysiwyg-fullscreen", la partie haute de l'administration "Modification d'un article" reste affichée par dessus avec le thème par défaut, masquant la barre d'outil et donc empêchant un retour en mode normal.

    C'est causé par le z-index 9999 en ligne 88 de core/admin/theme/theme.css

    .section .action-bar { z-index: 9999; }

    en le supprimant, l'article s'affiche correctement en fullscreen.


    -- Bizarrement sous firefox 42.0 la zone d’édition n'est pas redimensionnable, est-ce que d'autres constatent cela ? Et je n'arrive pas à trouver à quel endroit du CSS ça coince.

    A titre personnel, je trouve que la valeur min-height 300px à la ligne 19 de plxeditor/plxeditor/css/plxeditor.css est un peu petite pour un affichage en grande résolution. En la supprimant, la zone d'édition redevient plus agréable à utiliser.

    .iframe { [del]min-height: 300px;[/del] }

    -- D'autre part, pense-tu qu'il serait possible d'afficher une balise "alt" pour chacun des boutons de la barre d'outil (comme avec CKeditor par exemple) ?

    Je prépare une mise à jour qui corrige les problèmes que tu cites.

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • StéphaneStéphane Member, Former PluXml Project Manager
    bg62 a écrit:
    superbe !!!
    juste ce que je recherchais = merciS
    et pour ckEditor y--a-t-il moyen de faire apparaître également le 'comptage des mots' ?


    http://ckeditor.com/addon/wordcount

    Edit: j'ai rédigé un article pour expliquer les différentes étapes à réaliser pour installer le plugin de compteur de mot dans CKEditor
    http://goo.gl/ta8Tld

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 1.4.1 (18/11/2015) ##
    [+] Amélioration de l'affichage des fenêtres à partir des icônes de sélection des couleurs/smilies/lien
    [+] Pas d'affichage de l'éditeur sur l'écran d'édition des fichiers du thème et de la gestion des commentaires
    BUG Mauvais affichage en plein écran (superposition avec la barre d'action)
    BUG sous IE11: Impossible d’obtenir la propriété « createRange » d’une référence null ou non définie

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Super merci pour ce plugin ! :)
    J'apprécie particulièrement son aspect épuré et l'éditeur HTML intégré (je bidouille le HTML de la plupart de mes pages)
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    novembre 2015 modifié
    @Stéphane,

    J'ai trouvé un petit bug à corriger facilement.
    Avec Pluxml, on peut renommer le dossier de plugins. Chez moi, il s'appelle caissahoutils ou plugins2 selon les sites.
    Mais dans medias.php, tu as écrit le nom du dossier en dur : "plugins/"
    Il faut remplacer par $plxAdmin->aConf
    Cela se passe aux lignes 15 et 118.

    Dans tous mes plugins, je rajoute la fonction suivante pour connaitre la racine de mon plugin :
    [== PHP ==]
    <?php
    	private function pluginRoot() {
    		global $plxAdmin;
    		
    		if (isset($plxAdmin))
    			return $plxAdmin->racine.$plxAdmin->aConf['racine_plugins'].__CLASS__.'/';
    		else
    			return '/';
    	}
    ?>
    
    C'est bien commode et plus fiable que PLX_PLUGINS qui met des "../../" partout dans le code source des pages HTML. ( Ca pique les yeux )

    Dans le plugin tinyMCE, le gestionnaire de medias s'ouvre dans un iframe. C'est une particularité de TinyMCE pour tous les gestionnaires de fichiers.
    C'est assez sympa. Quand on affiche medias.php de Pluxml, on utilise le hook "AdminMediasFoot" pour savoir si on est dans un iframe.Dans ce cas, on force les styles des éléments qu'on veut cacher (menu, ..); Cela évite de ré-écrire le gestionnaire de medias.

    Cordialement
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @stephane,

    J'ai regardé hier soir. On peut utiliser medias.php de Pluxml dans un popup, il suffit dans le hook "AdminMediasFoot" de faire un test en javascript sur le window.name pour savoir si medias.php est lancé directement ou par plxeditor. Dans le dernier cas, appliquer des règles CSS supplémentaires pour cacher le menu, et faire une boucle avec document.querySelectorAll('#medias-table td a') pour ajouter l'attribut onclick.

    Mais comme tu le fais remarquer dans ton code js, certains bloquent les popups, donc l'utilisation d'un iframe semble préférable.

    Cordialement
  • StéphaneStéphane Member, Former PluXml Project Manager
    @bazooka07
    Tres interessant tout ce que tu proposes. Justement je cherchais à faire de la partie médias une sorte "d'API" pouvant etre appelée par des plugins pour ne pas à avoir un fichier medias.php dans le dossier des plugins. L'idée était sous une forme que je n'avais pas encore réellement trouvée efficace pour afficher le gestionnaire sans la partie sidebar, header, etc... mais n'avoir que la partie de gestions des fichiers + upload

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • ScithScith Member
    décembre 2015 modifié
    Salut, petit retour d'utilisation :
    Les features de base fonctionnent très bien mais pour l'éditeur HTML intégré j'ai par contre quelques reproches à formuler :
    - Le fichier est systématiquement "minifié" (tout est mis sur une ligne) ce qui fait que quand je veux l'éditer hors pluxml c'est pas facile
    - L'éditeur HTML intégré mets des tabulations partout. Pourquoi pas pour la lisibilité mais on se retrouve avec des balises insignifiantes (type <p>) toutes seules sur une ligne

    Du coup petites suggestions fonctionnelles :
    - Laisser le fichier HTML s'afficher tel quel (sans tout tabuler sous risque de trop bidouiller le fichier)
    - Dans l'éditeur HTML, laisser les icônes de formattage : par exemple "B" écrit avant le curseur "<strong>" et après le curseur "</strong>", tabulation permet de tabuler (pour la lisibilité du code), URL écrit un "<a ...></a>", etc ...

    Merci encore pour le plugin
  • SuricatSuricat Member
    avril 2016 modifié
    Bonjour,

    L'ajout d'une image avec PlxEditor ne fonctionne plus pour PluXml 5.5

    La raison est sans doute le changement dans \core\lib\class.plx.medias.php de
    [== Indéfini ==]
    public function uploadFiles($files, $post) {
    ...
    

    en
    [== Indéfini ==]
    public function uploadFiles($usrfiles, $post) {
    
    		$files = array();
    		if(isset($post['myfiles'])) {
    			foreach($post['myfiles'] as $key => $val) {
    				list($selnum, $selval) = explode('_', $val);
    				$files[] = array(
    					'name'		=> $usrfiles['selector_'.$selnum]['name'][$selval],
    					'size'		=> $usrfiles['selector_'.$selnum]['size'][$selval],
    					'tmp_name'	=> $usrfiles['selector_'.$selnum]['tmp_name'][$selval]
    				);
    			}
    		}
    ...
    


    Y a-t-il une mise à jour de prévue ?
  • SuricatSuricat Member
    avril 2016 modifié
    En fait, pour assurer une compatibilité avec l'existant, la fonction dans \core\lib\class.plx.medias.php aurait pu être écrite ainsi :
    [== Indéfini ==]
    public function uploadFiles($usrfiles, $post) {
    
    		
    		if(isset($post['myfiles'])) {
    			$files = array();
    			foreach($post['myfiles'] as $key => $val) {
    				list($selnum, $selval) = explode('_', $val);
    				$files[] = array(
    					'name'		=> $usrfiles['selector_'.$selnum]['name'][$selval],
    					'size'		=> $usrfiles['selector_'.$selnum]['size'][$selval],
    					'tmp_name'	=> $usrfiles['selector_'.$selnum]['tmp_name'][$selval]
    				);
    			}
    		}
    		else{
    			$files = $usrfiles;
    		}
    ...
    

    Avec cette modif, plxEditor fonctionne dans PluXml 5.5, mais ça fait changer le code de PluXml...
  • bg62bg62 Member
    lut;)
    j'ai bien ce 'code', dans une mise à jour sous 5.5, MAIS si j'arrive à créer les dossiers pour les images, je ne parviens pas par compte à les y 'uploader', rien à faire.
    Pas de soucis sous 5.4, mais gros problèmes donc sous 5.5 ....
    ?
    ;)
  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 1.5 (25/05/2016) ##
    [+] Compatibilité PluXml 5.5 (nouvelle gestion du gestionnaire de médias)

    pour l'installation ou la mise à jour: supprimer manuellement l'ancien dossier du plugin et mettez le nouveau à la place

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • [== Indéfini ==]
    ## Version 1.5 (25/05/2016) ##
    [+] Compatibilité PluXml 5.5 (nouvelle gestion du gestionnaire de médias)
    
    Tu vis dans le futur Stéphane ? :D
  • StéphaneStéphane Member, Former PluXml Project Manager
    Hahaha meme pas fait gaffe
    j'ai anticipé la sortie que je comptais faire demain et j'ai oublié de corriger la date.
    mdr !

    langfr-330px-Retour_vers_le_futur_-_Logo.svg.png

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • bg62bg62 Member
    Stéphane a écrit:
    Hahaha meme pas fait gaffe
    j'ai anticipé la sortie que je comptais faire demain et j'ai oublié de corriger la date.
    mdr !

    https://upload.wikimedia.org/wikipedia/fr/thumb/2/2c/Retour_vers_le_futur_-_Logo.svg/langfr-330px-Retour_vers_le_futur_-_Logo.svg.png
    +100 :)
  • DeevadDeevad Member
    Stéphane a écrit:
    ## Version 1.5 (25/05/2016) ##
    [+] Compatibilité PluXml 5.5 (nouvelle gestion du gestionnaire de médias)
    Un grand, grand merci! Je vais tester/installer tout ça.
  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 1.5.1 (14/11/2016) ##
    [+] Configuration de l'utilisation de plxEditor avec les pages statiques
    [+] Traduction anglaise + diverses améliorations (contribution Deevad)

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • bg62bg62 Member
    novembre 2016 modifié
    lut:)
    sur un site, avec la version " plxEditor-1.4.1 "
    cela me donne ceci lorsque j'importe un 'medias'
    <img src="data/medias/site-internet.jpg" alt="" />
    ok donc il ne reste plus qu'à renseigner la balise " alt"
    MAIS sur un autre site, avec la version " plxEditor-1.5.1 "
    cela me donne :
    <img src="data/medias/site-internet.jpg" />
    plus de " alt " dispo ....
    Pas tout compris, si c'est la nouvelle version ou si c'est chez moi que cela se produit ...
    @+
  • Bonjour,

    Nikel Stéphane le plugin.

    Par contre, c'est dommage que par rapport à plxtoolbar, nous n'ayons pas le bouton "Quote" et le bouton "Youtube".

    Possible de rajouter cela ?
  • StéphaneStéphane Member, Former PluXml Project Manager
    @Iron: j'ai poussé sur le github de plxEditor une mise à jour avec l'ajout des boutons quote et youtube

    https://github.com/Pluxopolis/plxEditor/archive/master.zip

    Ce n'est pas encore une publication officielle, mais si tu veux tester, c'est dispo.
    Faut faire l'installation manuellement en remplaçant les anciens fichiers par les nouveaux.

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Ha, "quote" m'intéresse aussi. Pour Youtube, j'ai pris l'habitude d'utiliser la vue 'code source' mais ça m'arrange également.
    Merci Stéphane pour cet ajout.
  • StéphaneStéphane Member, Former PluXml Project Manager
    J'attends vos retours pour savoir si ça bug pas avant de sortir la maj offficiellement

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • IronIron Member
    janvier 2017 modifié
    Donc je viens de tester, et voilà mes retours :

    - Le "Quote" fonctionne très bien
    - Le "Youtube" fonctionne mais :

    L'url classique du style : https://www.youtube.com/watch?v=r2o_BA__1e4 => fonctionne
    l'url courte que peut fournir Youtube du style : https://youtu.be/r2o_BA__1e4 => ne passe pas car pas reconnue

    Et j'avais raté la dernière fois (si on veut une barre complète) qu'il manque la balise "Code"

    Voili, voilou :P

    Edit : Et si on veut chipoter, il manquerait la balise "tableau" mais c'est moins important
    Edit 2 : Si je veux chipoter encore plus : Le code "youtube" n'est pas responsive. Moyen d'insérer le code de Jos de son "Fitvids" ?
    http://forum.pluxml.org/viewtopic.php?id=3916

    C'est à dire juste la balise d'encadrement pour ceux qui aurait déjà installer le plugin de Jos. Comme ça tout serait déjà pret ! ;) :D
    <div class="fitvids"> et </div>
  • StéphaneStéphane Member, Former PluXml Project Manager
    Nouvelle mise à jour sur github pour prendre en compte les urls raccourcies (+ divers autres formats) de youtube

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • StéphaneStéphane Member, Former PluXml Project Manager
    Iron a écrit:
    Edit 2 : Si je veux chipoter encore plus : Le code "youtube" n'est pas responsive. Moyen d'insérer le code de Jos de son "Fitvids" ?
    http://forum.pluxml.org/viewtopic.php?id=3916

    C'est à dire juste la balise d'encadrement pour ceux qui aurait déjà installer le plugin de Jos. Comme ça tout serait déjà pret ! ;) :D
    <div class="fitvids"> et </div>

    il est responsive avec PluCSS car le code inséré est maintenant entouré avec
    <div class="frame"></div>
    

    .frame est définie dans PluCSS ce qui rend la video youtube responsive

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • StéphaneStéphane Member, Former PluXml Project Manager
    Iron a écrit:
    Et j'avais raté la dernière fois (si on veut une barre complète) qu'il manque la balise "Code"

    Je comprends pas. Tu peux détailler stp

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • Je ferai une PR pour ajouter une langue :D
Connectez-vous ou Inscrivez-vous pour répondre.