Nodes & Ranges

[Naatan]

Ik ben een paar dagen geleden begonnen met een WYSIWYG editor voor mijn CMS, dit omdat ik een beetje hopeloos werd van de opensource editers die er online worden aangeboden (er is altijd wel iets mis mee).

Nu werkt alles op een ding na, ik kan niet goed detecteren welke stijlen er van toepassing zijn op de geselecteerde text.

Stel ik heb de volgende code:

code:

<b>dit is een test</b>

Wanneer ik nu de hele zin selecteer (dit is een test) krijg ik een verkeerde nodeType terug (check de javascript code hieronder voor toelichting), maar wanneer ik "is een test" selecteer krijg ik wel de juiste terug.

Wanneer ik nu al de code in een <div> tag zet werkt het gewoon altijd.

Ik weet prima waar het idee vandaan komt, dit is de functie die ik gebruik:

code:

function dve_GetSelection() {
  var did = document.getElementById(editor);
  var sel = did.contentWindow.getSelection();
  if (sel && sel.rangeCount>0) {
    var range = sel.getRangeAt(0);
    var container = range.commonAncestorContainer;
    if (container.nodeType == 3) getParent(container);
  }
}

het gaat hem om "var container = range.commonAncestorContainer;"

Wanneer ik de complete zin selecteer heeft de selectie geen parent node aangezien je de huidige node geselecteerd hebt, wanneer ik er een div omheem zet is dit dus wel het geval en werkt de code wel.

Een div er omheem zetten is echter niet mij grootste voorkeur want dan moet ik bijna overal in de code rekening hiermee gaan houden.

Heeft iemand een beter idee om dit voor elkaar te krijgen?

Het spijt me als het niet helemaal duidelijk is, maar ik geloof dat ik toch al de info heb gegeven die je nodig zou hebben voor mij probleem.

Bij voorbaat dank voor een ieder die reageert

edit:

even een extra toelichting, de getParent functie is een functie die momenteel al de parent node's echo'ed en de styles hiervan mee geeft als deze gedefineerd zijn.