Problème de selectionStart avec les <div>

Bonjour,

J'ai fait un script qui ajoute une balise au début et à la fin du texte selectionné.
Le code fonctionne parfaitement avec TextArea et Input[type=text].
Mais j'ai un problème avec selectionStart & selectionEnd. Ils ne fonctionnent pas avec un div[contenteditable].

Voici le code :

<div id="theDiv" contenteditable>
QWERTZUIOP
ASDFGHJKL
YXCVBNM
</div><br>
<input value="Bold" type="button" onmousedown="textFormat(theDiv,'<b>','</b>');">
<input value="Italic" type="button" onmousedown="textFormat(theDiv,'<i>','</i>');">
<input value="Underline" type="button" onmousedown="textFormat(theDiv,'<u>','</u>');">

<br><br>

<textarea id="theTextArea">
QWERTZUIOP
ASDFGHJKL
YXCVBNM
</textarea><br>
<input value="Bold" type="button" onmousedown="textFormat(theTextArea,'<b>','</b>');">
<input value="Italic" type="button" onmousedown="textFormat(theTextArea,'<i>','</i>');">
<input value="Underline" type="button" onmousedown="textFormat(theTextArea,'<u>','</u>');">


<script>
   function textFormat(elem,a,b){                // Exemple : textFormat(HTML_Element,'<balise>','</balise>');
      var box = elem;
      if(getSelection() != ''){
         if(box.value){
            var selectStart = box.selectionStart;
            var selectEnd = box.selectionEnd;
            var newContent = box.value.substring(0,selectStart) + a + getSelection() + b + box.value.substring(selectEnd);
            box.value = newContent;
         }
         else{
            var selectStart = box.selectionStart;
            var selectEnd = box.selectionEnd;
            var newContent = box.innerHTML.substring(0,selectStart) + a + getSelection() + b + box.innerHTML.substring(selectEnd);
            box.value = newContent;
         }
      }
   }
</script>

Si vous voyez le problème, dites-le moi. Je crois que tout ce que j'ai besoin, c'est de pouvoir récupérer le début et la fin de la zone sélectionnée pour l'incruster dans les substring()