sélection avec l'objet DOM:Range
Bonjour,
Je suis présentement en train de développer un éditeur RTF et je rencontre un problème embêtant de sélection sous Mozilla. Voici mon objectif: lorsque je sélectionne du texte (avec la souris ou le clavier), je souhaite capturer le HTML qui en découle, pas seulement le texte sélectionné. J'y arrive presque mais pour certains cas, je suis totalement en déroute!
Par exemple: j'ajoute un lien à mon RTF t.q.:
<a href="http://www.pagequelconque.com">test</a>
Lorsque je sélectionne exactement le texte du lien ("test") ou que je sélectionne une partie inclusive du texte ("te", "es", etc.), je récupère ma sélection au moyen de mon objet selection, et je crée mon range à l'aide de getRangeAt() et cloneRange(). Ensuite, j'utilise la méthode cloneContents() pour obtenir le fragment sélectionné et toutes les nodes qui y sont inclues. Toutefois, le résultat est décevant: on dirait que ma sélection ne considère pas la balise <a ... /> Ca me retourne un node de type Text et non un node A.
Si, toutefois, j'ajoute le texte suivant au devant de mon lien:
un test: <a href="http://www.pagequelconque.com">test</a>
et que je sélectionne une partie du texte à l'extérieur de ma balise A, je réussirai à accéder à mes deux nodes inclues dans ma sélection, soit "Text" et "A" (probablement parce que je force la sélection du lien.) Sinon, si je sélectionne uniquement mon lien "test", on dirait que la sélection ne prend pas en compte la balise...
Est-ce que quelqu'un a une piste de solution?
Merci beaucoup!
Extrait semblable à mon code:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function testRange() {
// récupérer l'objet RTE
var oRTE = document.getElementById(rte).contentWindow;
// obtenir la sélection courante et créer le range
var selection = oRTE.getSelection();
var objRange = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
// obtenir l'objet DocumentFragment et vérifier ses nodes fils
var objContents = objRange.cloneContents();
for (var i = 0; i < objContents.childNodes.length; i++) {
alert(i + ":" + objContents.childNodes[i].nodeName);
}
} |
