Créer son propre éditeur WYSIWYG

Bonjour à tous,
J'ai voulu créer mon propre éditeur WYSIWYG mais je me heurte à une difficulté que je n'arrive pas à résoudre. C'est au niveau du curseur et de la sélection du texte.
Pour sélectionner du texte et déplacer le curseur dans un input ou un textarea nous avons la méthode setSelectionRange() mais dans le cas d'un éditeur WYSIWYG on ne peut pas utiliser un textarea car le texte est préformaté.
J'ai essayé de mettre un textarea en "hidden" automatiquement focus lorsqu'on clique dans le p ou la div qui possède un attribut contenteditable, le textarea renvoi le résultat formaté à la div, problème, lorsque l'élément est caché le focus ne prend pas. Cette solution ne marche donc que si l'élément qu'on ne veut pas voir est visible.
Quelle solution me reste t-il ? dois-je camoufler ce textarea derrière ma div ?
Je sais pas si j'ai été assez clair, j'ai du mal à exprimer ce que je veux dire, désolé :oops: et merci :zoubi:

de mémoire les éditeurs wysiwyg passent par un textarea en arrière plan ...
l'affichage se faisant dans un div ...

De mémoire aussi quand j'ai écrit le mien il y a plus de 10 ans j'ai utilisé un textarea qui était mis à jour avec le innerhtml d'un div au moment du submit. Le textarea était "caché" via css.

Salut,

A une époque je me suis aussi intéressé à cette question notamment pour faire éditeur avec coloration syntaxique, on m'avait donné cet exemple : http://www.cdolivet.com/editarea/edi...mple_full.html.

On peut utiliser une textarea pour la saisie du texte et l'affichage d'un curseur et pour la couleur on utilise par exemple une div qu'on place derrière la textarea mais pour qu'on puisse voir le texte coloré de la div il faudrait par exemple que la textarea ait un fond transparent et une couleur légère et/ou une opacité faible... Cela fonctionne plus ou moins mais ce n'est pas terrible parfois il y a un décalage entre les deux textes, il y a des contraintes...

Par contre je ne vois pas comment cela peut fonctionner pour un éditeur WYSIWYG car il me semble que le texte de la textarea ne peut pas avoir des polices différentes, des tailles de caractère différentes...

Et aujourd'hui je pense que ce serait plus efficace d'utiliser seulement (pas de textarea) une zone éditable (contentEditable = "true") et c'est assez simple à faire, la plupart des fonctionnalités de base peut se faire avec la méthode execCommand et en plus tu as plusieurs exemples et tutos...

Il y a un exemple avec une petite explication ici : Rich-Text Editing

:fleche: Regarde ce que cela donne ici : http://jsbin.com/newohujevi/edit?html,output

@Beginner. Le textarea ,qui est mis dans un formulaire, sert juste à contenir le contenu HTML du div au moment du submit.

Bonjour,
Je connais la méthode execCommand() pour faire du rich-text editing avec de l'iframe mais je la trouve totalement opaque, en plus elle ajoute des espaces / lignes indésirables très difficile à supprimer. C'est pour ça que je cherchais un moyen de tout faire moi-même. Je pense que la meilleure solution est que l’utilisateur tape dans le textarea avec une div au-dessous qui montre l'aperçu en temps réel. Apparemment on ne peut pas faire du WYSIWYG sans passer par une iframe avec la méthode execCommand() :calim2:
Merci à tous pour vos réponses, je vais quand même m'amuser un peu avec le rich-text editing car ça vaut toujours le coups de s'attarder sur quelque chose même si ça nous intéresse pas :aie:

Salut à tous,

Citation:

---

Envoyé par tarte-aux-fraises

Je connais la méthode execCommand() pour faire du rich-text editing avec de l'iframe...
...
Apparemment on ne peut pas faire du WYSIWYG sans passer par une iframe avec la méthode execCommand()

---

C'est vrai que sous ton fil j'ai vu ce fil : Créer son propre éditeur de texte dans lequel il est dit cela mais c'était en 2006... Je ne sais pas si c'était vrai à l'époque mais aujourd'hui tu peux utiliser la méthode execCommand() sans iframe ni textarea...

D'ailleurs si tu regardais le lien (http://jsbin.com/newohujevi/edit?html,output) que je t'ai donné tu verrais que la zone d’édition c'est juste une div avec contentEditable = "true"...

Citation:

---

Envoyé par tarte-aux-fraises

mais je la trouve totalement opaque, en plus elle ajoute des espaces / lignes indésirables très difficile à supprimer.

---

Ah bon ? Je n'ai pas constaté cela, peux-tu tester le lien ci-dessus et me donner un exemple ?

Citation:

---

Envoyé par tarte-aux-fraises

C'est pour ça que je cherchais un moyen de tout faire moi-même.

---

Même si tu conçois ta propre méthode tu peux quand même utiliser une zone éditable (contentEditable = "true") sans textarea...

Citation:

---

Envoyé par tarte-aux-fraises

Je pense que la meilleure solution est que l’utilisateur tape dans le textarea avec une div au-dessous qui montre l'aperçu en temps réel.

---

Ben j'aimerais bien savoir comment tu ferais ça, par exemple comment tu fais pour avoir des polices différentes, des tailles de caractère différentes, comment tu fais pour l'italique, le souligné, le barré...

Citation:

---

Envoyé par badaze

@Beginner. Le textarea ,qui est mis dans un formulaire, sert juste à contenir le contenu HTML du div au moment du submit.

---

Si tu veux parler de l'exemple que j'ai donné eh bien je n'ai pas vu de textarea... Et pour ce qui est de "tarte-aux-fraises" j'ai cru comprendre qu'il voulait faire un éditeur WYSIWYG mais je ne vois pas comment cela peut être possible avec une textarea...

Citation:

---

Envoyé par Beginner.

Si tu veux parler de l'exemple que j'ai donné eh bien je n'ai pas vu de textarea... Et pour ce qui est de "tarte-aux-fraises" j'ai cru comprendre qu'il voulait faire un éditeur WYSIWYG mais je ne vois pas comment cela peut être possible avec une textarea...

---

Cela n'est pas possible de faire un éditeur WYSIWYG avec un textarea. Je voulais juste dire que j'avais utilisé un textarea (non affichable et dans un formulaire) pour recevoir le contenu HTML d'un DIV éditable au moment du submit.

@Beginner.
Effectivement, je m'y suis attardé hier et on peut aussi l'utiliser sur une div ou autre, il suffit d'activer le rich-text editing sur l'élément et mettre l'attribut contenteditable. On dirait que les bugs d'espaces indésirables ont été corrigés depuis la dernière fois que j'ai testé. Cela répond parfaitement à mes attentes du coup, mais je reste quand même frustré par ces méthodes toutes prêtes qui font tout à notre place et qu'on ne peut pas réécrire :?
J'aurais aimé pouvoir jouer avec des méthodes comme createRange(), setSelectionRange(), des regex, etc. Afin de tout réaliser moi-même.

Citation:

---

Envoyé par badaze

Cela n'est pas possible de faire un éditeur WYSIWYG avec un textarea. Je voulais juste dire que j'avais utilisé un textarea (non affichable et dans un formulaire) pour recevoir le contenu HTML d'un DIV éditable au moment du submit.

---

Ah ok, merci je comprends mieux maintenant...

Citation:

---

Envoyé par tarte-aux-fraises

...mais je reste quand même frustré par ces méthodes toutes prêtes qui font tout à notre place et qu'on ne peut pas réécrire :?
J'aurais aimé pouvoir jouer avec des méthodes comme createRange(), setSelectionRange(), des regex, etc. Afin de tout réaliser moi-même.

---

Oui je te comprends, ça m'arrive aussi... Mais par contre tu peux très bien réécrire cette méthode mais après on te dira peut-être que tu réinventes la roue...

Ceci dit cette méthode ne fait pas tout, il y a beaucoup de choses que tu peux ajouter et tu pourras alors "jouer" avec les méthodes relatives à la sélection, au range...

Tu pourrais te concentrer sur d'autres fonctionnalités...