Range et extractContents : extraire les noeuds
Bonsoir !
J'expérimente certaines propriétés d'HTML5 dont l'attribut contentEditable, et les range du DOM avec lesquelles je galère un petit peu. Je souhaiterais pouvoir récupérer la sélection de l'utilisateur, puis la supprimer pour la mettre à un autre endroit. Voici le code minimal :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <p contenteditable="true">Mon texte</p>
<button onclick="modifier()">Modifier</button>
<p id="paragraphe"></p>
<script>
function modifier()
{
var range = window.getSelection().getRangeAt(0);
var contents = range.extractContents();
var elm = document.getElementById('paragraphe');
elm.appendChild(contents);
}
</script> |
Ceci fonctionne très bien. Maintenant, le soucis commence si je mets des balises dans le texte. Par exemple, si je remplace le document du premier paragraphe par "Mon t<b>ex</b>te", la balise <b> est bien copiée si je sélectionne (j'ai mis la sélection en gras) "Mon t<b>ex</b>te" ou "Mon t<b>ex</b>te" mais ce n'est pas le cas si je sélectionne "Mon t<b>ex</b>te" ou "Mon t<b>ex</b>te".
Les deux premiers cas sont logiques, il est bien spécifié dans la documentation que si je sélectionne e</b>, extractContents va automatiquement rajouter la balise d'ouverture manquante. En revanche cela me pose problème dans les deux cas suivants : en effet, en sélectionnant "Mon t<b>ex</b>te" je sous-entends que je souhaite également sélectionner le gras, mais la seule façon est de sélectionner un caractère avant ou un caractère après pour effectivement englober la balise. Ce que j'aimerais c'est que si je sélectionne ça, je me retrouve avec "<b>ex</b>", et non "ex" uniquement
Je ne sais pas si je suis très clair ?
