Discussion :

[umeboshi]

Bonjour à tous,

Voilà je suis en train de réaliser un éditeur WYSIWYG en Javascript.
J'ai donc une iframe en designMode, et j'aimerai récupérer le code HTML de la sélection.

J'arrive à récupérer la sélection (sous Firefox) avec cette commande :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var sel = document.getElementById('frame').contentDocument.getSelection();

Mais le résultat est en texte, pas en HTML.
Sinon, j'arrive à récupérer le contenu HTML de toute l'iFrame (Firefox) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var sel = document.getElementById("texte").contentDocument.body.innerHTML;

L'objectif étant de détecter les mises en forme appliquées (bold, justifycenter, etc) afin de mettre en surbrillance les boutons associés de la barre de menu.

Existe-t-il un moyen de récupérer la sélection en HTML ou de savoir quelle execCommand() est utilisée sur la sélection?

Merci,

[Bovino]

Salut.

getSelection() te retourne un objet de type Range. Pour accéder à la balise la plus proche (et donc le noeud DOM correspondant), il faut utiliser la propriété startContainer (ou endContainer).

A noter toutefois que cela n'est pas accepté par IE, pour lequel il est à priori impossible de passer d'un objet Range à la structure HTML.

[umeboshi]

Merci pour ta réponse,

Mon objectif était de récupérer la sélection en HTML puis de réaliser des tests en fonction des balises, si tu me dis que dans IE je ne pourrais pas passer d'un objet range à la structure HTML c'est que je ne cherche pas dans la bonne direction.
J'aimerai obtenir le même résultat que dans l'éditeur WYSIWYG de Google Documents, qui reconnait le style et la mise en page en fonction de la position du curseur. (mais comment font-ils?)

[umeboshi]

Finalement, j'ai trouvé comment faire avec la commande (sous Firefox) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var iframe = document.getElementById("id_frame");
alert(iframe.contentDocument.queryCommandValue("fontsize"));

ça renvoie un string avec la valeur de fontSize (dans cet exemple), c'est donc exactement ce que je cherchais.