Création d'un éditeur WYSIWYG online [Résolu]

jo_le_coco · 26/05/2011, 20h57

Bonjour à tous !

Ma question est très simple : comment créer un éditeur WYSIWYG en ligne ? C'est-à-dire à la manière de Google Docs ou TinyMCE.

Est-ce qu'on peut faire ça avec du Javascript seul ?

Merci de vos réponses

Bovino · 26/05/2011, 21h36

Oui, tu peux le faire en JavaScript pur, mais attention, ce n'est pas du niveau débutant et si tu regardes le poids d'un script comme TinyMCE, tu comprendras que c'est beaucoup de code !

jo_le_coco · 26/05/2011, 22h10

J'ai bien vu

Mais en fait ma question, c'est juste : comment peut-on réaliser un WYSIWYG, dans le principe ? Je n'arrive vraiment pas à voir comment on peut transformer un <textarea> en zone qui soit à la fois modifiable et où on puisse appliquer de la mise en forme...

SpaceFrog · 27/05/2011, 08h51

le code est la pour ajouter des balises de mise en forme autour du texte.
pour ce qui est du rendu le script remplace souvent le textearea par une autre balise html ...

bewidia · 27/05/2011, 08h53

Il y a déjà CKEditor (http://ckeditor.com/demo) qui permet de faire de l'édition de texte enrichi en ligne. A priori ils ne passent pas par du textarea, mais gèrent les événements clavier/navigateur pour modifier un bloc html

le_chomeur · 27/05/2011, 10h08

Bonjour

en fait tu ne transforme pas un textarea en éditeur , mais tu dois le construire de toute part a part d'une div ( ou span ) éditable , grâce a la propriété contenteditable="true".

une fois ton conteneur rendu éditable , tu peux y associer des effets de mise en forme pour commencer otn apprentissage grâce a la fonction js : execCommand ( je te laisse chercher la doc

)

SpaceFrog · 27/05/2011, 10h11

le coup de la transformation du textearea est une securité en cas de desactivation du js ...

jo_le_coco · 27/05/2011, 13h35

Génial ! C'est exactement ce que je cherchais. Je ne pensais pas que ça consistait en un simple attribut

[édité]

Bovino · 27/05/2011, 13h40

En fait, ça existe depuis un petit moment, mais ça a été intégré à la spécification HTML en HTML5 (comme l'attribut autocomplete par exemple).
Mais Firefox le prend très bien en compte (comme tous les principaux navigateurs d'ailleurs)

jo_le_coco · 27/05/2011, 13h44

Effectivement, je viens de voir qu'en fait sous Firefox ça fonctionnait ^^

Merci beaucoup pour vos réponses

26/05/2011, 20h57	#1
jo_le_coco Membre régulier Étudiant Inscription : décembre 2005 Messages : 182 Détails du profil Informations personnelles : Sexe : Âge : 22 Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2005 Messages : 182 Points : 85 Points : 85	Création d'un éditeur WYSIWYG online Bonjour à tous ! Ma question est très simple : comment créer un éditeur WYSIWYG en ligne ? C'est-à-dire à la manière de Google Docs ou TinyMCE. Est-ce qu'on peut faire ça avec du Javascript seul ? Merci de vos réponses
	00

26/05/2011, 21h36	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	Oui, tu peux le faire en JavaScript pur, mais attention, ce n'est pas du niveau débutant et si tu regardes le poids d'un script comme TinyMCE, tu comprendras que c'est beaucoup de code ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

26/05/2011, 22h10	#3
jo_le_coco Membre régulier Étudiant Inscription : décembre 2005 Messages : 182 Détails du profil Informations personnelles : Sexe : Âge : 22 Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2005 Messages : 182 Points : 85 Points : 85	J'ai bien vu Mais en fait ma question, c'est juste : comment peut-on réaliser un WYSIWYG, dans le principe ? Je n'arrive vraiment pas à voir comment on peut transformer un <textarea> en zone qui soit à la fois modifiable et où on puisse appliquer de la mise en forme...
	00

27/05/2011, 08h51	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 009 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 009 Points : 45 093 Points : 45 093	le code est la pour ajouter des balises de mise en forme autour du texte. pour ce qui est du rendu le script remplace souvent le textearea par une autre balise html ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

27/05/2011, 08h53	#5
bewidia Membre habitué Inscription : octobre 2009 Messages : 122 Détails du profil Informations forums : Inscription : octobre 2009 Messages : 122 Points : 116 Points : 116	Il y a déjà CKEditor (http://ckeditor.com/demo) qui permet de faire de l'édition de texte enrichi en ligne. A priori ils ne passent pas par du textarea, mais gèrent les événements clavier/navigateur pour modifier un bloc html
	00

27/05/2011, 10h08	#6
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	Bonjour en fait tu ne transforme pas un textarea en éditeur , mais tu dois le construire de toute part a part d'une div ( ou span ) éditable , grâce a la propriété contenteditable="true". une fois ton conteneur rendu éditable , tu peux y associer des effets de mise en forme pour commencer otn apprentissage grâce a la fonction js : execCommand ( je te laisse chercher la doc ) __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	10

27/05/2011, 10h11	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 009 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 009 Points : 45 093 Points : 45 093	le coup de la transformation du textearea est une securité en cas de desactivation du js ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

27/05/2011, 13h35	#8
jo_le_coco Membre régulier Étudiant Inscription : décembre 2005 Messages : 182 Détails du profil Informations personnelles : Sexe : Âge : 22 Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2005 Messages : 182 Points : 85 Points : 85	Génial ! C'est exactement ce que je cherchais. Je ne pensais pas que ça consistait en un simple attribut [édité]
	00

27/05/2011, 13h40	#9
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	En fait, ça existe depuis un petit moment, mais ça a été intégré à la spécification HTML en HTML5 (comme l'attribut autocomplete par exemple). Mais Firefox le prend très bien en compte (comme tous les principaux navigateurs d'ailleurs) __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

27/05/2011, 13h44	#10
jo_le_coco Membre régulier Étudiant Inscription : décembre 2005 Messages : 182 Détails du profil Informations personnelles : Sexe : Âge : 22 Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2005 Messages : 182 Points : 85 Points : 85	Effectivement, je viens de voir qu'en fait sous Firefox ça fonctionnait ^^ Merci beaucoup pour vos réponses
	00

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