Un éditeur html wysiwyg (8)

Note: les exemples de cette page ne fonctionnent toujours qu'avec Microsoft Internet Explorer 5.5 minimum (sans parler du fait que je ne teste que sous IE6).

Sélection d'image

La dernière fois, j'avais terminé par un problème lié au fait qu'il fallait ruser pour parvenir à sélectionner une image en mode texte afin que sa modification ou son utilisation en tant que lien puisse fonctionner. Finalement, ça ne devrait pas être si compliqué que ça vu que l'objet «selection» dispose d'une propriété «type» qui peut prendre trois valeurs:

• none : quand il n'y a rien de sélectionné,
• text : quand l'élément sélectionné est de type texte,
• control : quand l'élément sélectionné est de type contrôle.

Il doit donc suffire de tester cette propriété puis le cas échéant modifier la sélection pour être en mode texte. Dans un premier temps, il faut s'assurer que l'objet sélectionné correspond bien à une balise image. Ca ça a été plutôt simple mais par contre ça a été pas mal compliqué pour passer à une sélection en mode texte. Malgré tout, après avoir essayé plusieurs des méthodes de l'objet TextRange, j'ai finalement réussi.

if (document.selection.type == "Control") { // - rien à faire si plus d'un contrôle sélectionné if (oSelection.length != 1) return; // - rien à faire si ce n'est pas une image if (oSelection(0).tagName != "IMG") return; // - met la sélection au niveau du contrôle var oImage = oSelection(0); oSelection = document.body.createTextRange(); oSelection.moveToElementText(oImage); oSelection.select(); }

Une dernière difficulté

Bon, voila le problème de la sélection des images est résolu. Ca permet non seulement de modifier une image mais aussi de l'utiliser pour définir un lien. Mais comme d'habitude, ça ne marche pas quand il s'agit de modifier ce type de lien.

Dans ce cas, «oSelection.parentElement().tagName» ne renvoie pas "A" mais "IMG". En cherchant un peu, il semble suffisant de tester si l'objet parent du parent de l'objet parent de la sélection (c'est pas simple!) ne serait pas lui même un lien puis de gérer un peu différement la modification du lien lorsque c'est le cas.

if (oSelection.parentElement().tagName == "A") { // La sélection correspond à un lien => // - mémorise l'élément lié actuel bIsLink = true; sOldHtml = oSelection.parentElement().innerHTML; // - récupère l'url et la légende du lien aArguments[0] = oSelection.parentElement().href; aArguments[1] = oSelection.parentElement().title; } else { // La sélection ne correspond pas à un lien // => teste si l'élément supérieur n'est pas un lien if (oSelection.parentElement().parentElement.tagName == "A") { // L'élément supérieur correspond à un lien => // - mémorise l'élément lié actuel bIsLink = true; sOldHtml = oSelection.parentElement().parentElement.innerHTML; // - récupère l'url et la légende du lien aArguments[0] = oSelection.parentElement().parentElement.href; aArguments[1] = oSelection.parentElement().parentElement.title; } if (bIsLink == false) { // L'élément supérieur ne correspond pas à un lien => // - initialise un nouveau lien aArguments[0] = ""; ...

Et pour la mise à jour du lien:

// - remplace le lien en cours par le nouveau lien sNewLink = sNewLink + sOldHtml + "</a>"; if (oSelection.parentElement().tagName == "A") oSelection.parentElement().outerHTML = sNewLink; else oSelection.parentElement().parentElement.outerHTML = sNewLink; ...

C'est d'autant plus compliqué à faire et à comprendre que:

• le «.parentElement()» dans le «oSelection.parentElement()» est une méthode qui renvoie l'élément parent de l'objet à laquelle elle s'applique
• le «.parentElement» dans le «oSelection.parentElement().parentElement» est une propriété qui renvoie l'objet parent dans la hiérarchie de l'objet

L'essentiel étant que ça marche...

Tester

Conclusion

Apparament, tout semble enfin fonctionner correctement (et quel fonctionnement!). Je vais donc pouvoir revenir à mes problèmes de code xhtml.

C'est vrai que cette fois-ci je n'ai pas fait grand-chose, mais ça ne se fait pas tout seul. Et en plus, j'ai perdu un peu de temps à ébaucher une boite de dialogue pour gérer la saisie des éléments <abbr>, <acronym>, <cite>... mais je crois que je vais laisser tomber.

Publicités