implémentation d'éditeur wisiwyg

antoinelavigne · 10/08/2011, 21h26

Bonjour,

j'ai un forum autour d'un jeu qui utilise le CMS Bbpress.
Afin d'agrémenter les messages, j'essaie d'installer un éditeur html wisiwyg pour les membres.
J'ai essayé Ckeditor, Tinymce qui sont trop lourds à mon gout ; j'en ai trouvé 1 très simple et très léger : STEditor.

J'arrive parfaitement à l'implanter sur les textarea en question mais je rencontre un problème : par exemple, quand un membre décide de mettre en gras un mot, ça marche bien et il le voit instantanément en gras.
Le problème vient du fait qu'une fois posté, le message du membre comporte un mot normalement en gras au lieu du mot affiché en gras.

Il me reste 2 solutions :

1/ Autoriser le CSS dans les messages du forum (dangereux et/ou foireux) ou autoriser juste les balises de l'éditeur (bold,italic etc..). BBpress étant très compliqué à paramétrer et ne trouvant pas ma réponse dans leurs forum, j'exclue cette solution.

2/ Essayer de faire en sorte qu'au lieu de "pondre" un avec un style, l'éditeur génére du BBcode qui lui est accepté sur mon forum ( en l’occurrence).

J'ai donc trifouillé dans le seul fichiers javascript nécessaire pour l'éditeur, vous pouvez le voir par vous-même à cette adresse : http://www.gosu.pl/steditor/SimpleTextEditor.js

Le problème c'est que STEditor utilise une commande ".execCommand" qui ne me permet pas de modifier la syntaxe de sortie (ca ne me permet pas de transformer le en [b]). Comment faire alors ?

J'espere recevoir de l'aide. Merci d'avance

gwinyam · 10/08/2011, 22h19

La méthode la plus violente mais, aussi efficace, serait carrément que tu remplaces le contenu de leur méthode execCommand.

Le comportement par défaut de document.execCommand est de rajouter une balise avec un style correspondant au besoin. Comme très bien expliquer ici.

En remplaçant le corps de leur fonction, tu peux reprendre le contrôle sur ce qui est généré.

L'autre option assez sale mais dépendant de ton niveau en JS et en PHP, serait de reconvertir ces fameuses balises span en des balises que tolère le forum.

Cette méthode me semble cependant moins bonne :

parce que c'est le serveur qui se tape le boulot du client
ça peut permettre l'ouverture de failles de sécurité
ça veut dire 2 algos de génération de balises au lieu d'un

On peut certainement trouver d'autres arguments en défaveur ou en faveur de cette seconde méthode. Je te conseille quand même la réécriture du JS. La zone de travail est délimitée. Et le script a l'avantage d'user du pattern "Commande". Ce qui rend bien plus malléable ton algo en fonction de tes besoins.

antoinelavigne · 11/08/2011, 00h52

Bonsoir à toi,

Tout d'abord merci à toi de m'avoir répondu

La deuxieme solution (2 générations de balises) est comme tu l'as démontré la moins optimale, mais je pense la seule que je peux entreprendre du fait que je n'ai aucune notion en javascript. Je maitrise le html, le css, le php etle mysql.

La re-ecriture du script m'est donc impossible

Comment générer du bbcode à partir du script existant ? Je rencontre le même problème avec tous les editeurs wisiwyg

Peut etre une fonction alternative que je pourrais exploiter?

Merci d'avance

galerien69 · 13/08/2011, 09h30

salut,

La solution la plus simple, c'est de trouver un plugin qui gère le bbcode. Ton script a l'air d'être poussiéreux, ca vaut le coup de passer un peu de temps à en chercher un autre, cela dit j'en connais pas, mais j'intuite que ya forcément quelqu'un qui s'est penché dessus.

Enfin, si t'es borné, on peut modifier la solution de gwinyam, à savoir :
coté js, avant de soumettre le texte, tu remplaces les balises span par leur équivalent bbcode [b] etc...

et côté serveur, tu te contentes d'htmlspecialchars pour interdire toute balise html.

Ca veut dire qu'il faut qu'en js, tu sois capable de détecter un span avec son attribut (j'imagine style="font-weight:bold;" pour du gras), et que tu wrappes par du [b] en l'occurrence.

Mais bon, si t'es une quille en js et que ca t'intéresses pas outre mesure, le plus simple c'est de trouver un plugin wysiwyg qui s'en occupe!

antoinelavigne · 13/08/2011, 20h12

Salut galerien69,

Comme tu l'as dit je suis une quille en JS et c'est pourquoi modifier le script est un vraie difficulté pour moi.

Les autres editeurs wisiwyg posent le même problème : le code qu'ils generent n'est pas interpreté par le forum

10/08/2011, 21h26	#1
antoinelavigne Invité régulier Inscription : mars 2005 Messages : 82 Détails du profil Informations forums : Inscription : mars 2005 Messages : 82 Points : 9 Points : 9	implémentation d'éditeur wisiwyg Bonjour, j'ai un forum autour d'un jeu qui utilise le CMS Bbpress. Afin d'agrémenter les messages, j'essaie d'installer un éditeur html wisiwyg pour les membres. J'ai essayé Ckeditor, Tinymce qui sont trop lourds à mon gout ; j'en ai trouvé 1 très simple et très léger : STEditor. J'arrive parfaitement à l'implanter sur les textarea en question mais je rencontre un problème : par exemple, quand un membre décide de mettre en gras un mot, ça marche bien et il le voit instantanément en gras. Le problème vient du fait qu'une fois posté, le message du membre comporte un <span style="font-weight: bold;">mot normalement en gras</span> au lieu du mot affiché en gras. Il me reste 2 solutions : 1/ Autoriser le CSS dans les messages du forum (dangereux et/ou foireux) ou autoriser juste les balises de l'éditeur (bold,italic etc..). BBpress étant très compliqué à paramétrer et ne trouvant pas ma réponse dans leurs forum, j'exclue cette solution. 2/ Essayer de faire en sorte qu'au lieu de "pondre" un <span> avec un style, l'éditeur génére du BBcode qui lui est accepté sur mon forum ( en l’occurrence). J'ai donc trifouillé dans le seul fichiers javascript nécessaire pour l'éditeur, vous pouvez le voir par vous-même à cette adresse : http://www.gosu.pl/steditor/SimpleTextEditor.js Le problème c'est que STEditor utilise une commande ".execCommand" qui ne me permet pas de modifier la syntaxe de sortie (ca ne me permet pas de transformer le <span style="font-weight:bold;"> en [b]). Comment faire alors ? J'espere recevoir de l'aide. Merci d'avance
	00

10/08/2011, 22h19	#2
gwinyam Membre Expert Mathieu ROBIN Développeur Web Inscription : mai 2006 Messages : 1 116 Détails du profil Informations personnelles : Nom : Mathieu ROBIN Âge : 25 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : mai 2006 Messages : 1 116 Points : 2 142 Points : 2 142	La méthode la plus violente mais, aussi efficace, serait carrément que tu remplaces le contenu de leur méthode execCommand. Le comportement par défaut de document.execCommand est de rajouter une balise <span> avec un style correspondant au besoin. Comme très bien expliquer ici. En remplaçant le corps de leur fonction, tu peux reprendre le contrôle sur ce qui est généré. L'autre option assez sale mais dépendant de ton niveau en JS et en PHP, serait de reconvertir ces fameuses balises span en des balises que tolère le forum. Cette méthode me semble cependant moins bonne : parce que c'est le serveur qui se tape le boulot du client ça peut permettre l'ouverture de failles de sécurité ça veut dire 2 algos de génération de balises au lieu d'un On peut certainement trouver d'autres arguments en défaveur ou en faveur de cette seconde méthode. Je te conseille quand même la réécriture du JS. La zone de travail est délimitée. Et le script a l'avantage d'user du pattern "Commande". Ce qui rend bien plus malléable ton algo en fonction de tes besoins. __________________ Mon blog techno et son billet hebdomadaire sur l'actualité jQuery. Et mon blog cuisine pour une personne. Le bouton ne masse pas les pieds, mais ça aide la communauté.
	00

11/08/2011, 00h52	#3
antoinelavigne Invité régulier Inscription : mars 2005 Messages : 82 Détails du profil Informations forums : Inscription : mars 2005 Messages : 82 Points : 9 Points : 9	Bonsoir à toi, Tout d'abord merci à toi de m'avoir répondu La deuxieme solution (2 générations de balises) est comme tu l'as démontré la moins optimale, mais je pense la seule que je peux entreprendre du fait que je n'ai aucune notion en javascript. Je maitrise le html, le css, le php etle mysql. La re-ecriture du script m'est donc impossible Comment générer du bbcode à partir du script existant ? Je rencontre le même problème avec tous les editeurs wisiwyg Peut etre une fonction alternative que je pourrais exploiter? Merci d'avance
	00

13/08/2011, 09h30	#4
galerien69 Membre éclairé F5(){F5} Inscription : avril 2008 Messages : 256 Détails du profil Informations personnelles : Sexe : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : F5(){F5} Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2008 Messages : 256 Points : 320 Points : 320	salut, La solution la plus simple, c'est de trouver un plugin qui gère le bbcode. Ton script a l'air d'être poussiéreux, ca vaut le coup de passer un peu de temps à en chercher un autre, cela dit j'en connais pas, mais j'intuite que ya forcément quelqu'un qui s'est penché dessus. Enfin, si t'es borné, on peut modifier la solution de gwinyam, à savoir : coté js, avant de soumettre le texte, tu remplaces les balises span par leur équivalent bbcode [b] etc... et côté serveur, tu te contentes d'htmlspecialchars pour interdire toute balise html. Ca veut dire qu'il faut qu'en js, tu sois capable de détecter un span avec son attribut (j'imagine style="font-weight:bold;" pour du gras), et que tu wrappes par du [b] en l'occurrence. Mais bon, si t'es une quille en js et que ca t'intéresses pas outre mesure, le plus simple c'est de trouver un plugin wysiwyg qui s'en occupe!
	00

13/08/2011, 20h12	#5
antoinelavigne Invité régulier Inscription : mars 2005 Messages : 82 Détails du profil Informations forums : Inscription : mars 2005 Messages : 82 Points : 9 Points : 9	Salut galerien69, Comme tu l'as dit je suis une quille en JS et c'est pourquoi modifier le script est un vraie difficulté pour moi. Les autres editeurs wisiwyg posent le même problème : le code qu'ils generent n'est pas interpreté par le forum
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email