[plugin] plxEditor

Stéphane · novembre 2015

É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

Stéphane · novembre 2015

publication de la version 1.4

kowalsky · novembre 2015

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) ?

bg62 · novembre 2015

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éphane · novembre 2015

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.

Stéphane · novembre 2015

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

Stéphane · novembre 2015

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

Scith · novembre 2015

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)

bazooka07 · novembre 2015

@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

bazooka07 · novembre 2015

@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éphane · novembre 2015

@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

Scith · décembre 2015

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

Suricat · avril 2016

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 ?

Suricat · avril 2016

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

bg62 · avril 2016

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éphane · mai 2016

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

LolYangccool · mai 2016

[== 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 ?

Stéphane · mai 2016

Hahaha meme pas fait gaffe
j'ai anticipé la sortie que je comptais faire demain et j'ai oublié de corriger la date.
mdr !

bg62 · mai 2016

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

Deevad · mai 2016

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éphane · novembre 2016

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

bg62 · novembre 2016

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

Iron · janvier 2017

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éphane · janvier 2017

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

Deevad · janvier 2017

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éphane · janvier 2017

J'attends vos retours pour savoir si ça bug pas avant de sortir la maj offficiellement

Iron · janvier 2017

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 !

Stéphane · janvier 2017

Nouvelle mise à jour sur github pour prendre en compte les urls raccourcies (+ divers autres formats) de youtube

Stéphane · janvier 2017

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

Stéphane · janvier 2017

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

Rubén · janvier 2017

Je ferai une PR pour ajouter une langue

[plugin] plxEditor

Réponses