[JS]richtext editor: focus op tekstveld->geen selectie in IE

[djluc]

Ik ben net zoals velen hier bezig met het maken van een richtext editor. Dit gaat allemaal heel leuk alleen heb ik 1 probleem. Dit is een specifiek IE probleem:

Ik heb een iframe waarin het document staat. Ik selecteer hier een stuk tekst en klik op een button om deze vet te maken. Dit gaat helemaal goed. Nu wil ik een link maken, en heb daarvoor dus een tekstveldje nodig om de url in te voeren, na een klik op het tekstveld (buiten het iframe dus) ben ik mijn selectie in het iframe kwijt. Is dit ook de bedoeling? Want Mozilla etc. doen dit allemaal wel goed.

_{Ik heb nu een lelijke tijdelijke oplossing: een prompt waarmee het wel werkt. Ook een popup geeft een oplossing, echter willen we geen popups gebruiken.}

[André]

Dan sla je voordat je het tekstveldje focussed de selectie op

[djluc]

André schreef op 27 oktober 2004 @ 11:31:
Dan sla je voordat je het tekstveldje focussed de selectie op

Hoe kan ik een selectie opslaan als deze verloren gaat? Bedoel je misschien de tekst opslaan van de selectie en deze later weer opzoeken in de div? Of bedoel je functies als window.getSelection?

[RobIII]

Kijk eens naar execCommand('CreateLink') dat scheelt je weer een textveldje

http://msdn.microsoft.com...e/methods/execcommand.asp
http://msdn.microsoft.com.../reference/commandids.asp
http://msdn.microsoft.com.../constants/createlink.asp

ow, by the way, ik heb géén idee of dit werkt in Mozilla hoor... Ik doe richedit dingen alleen in IE (edit: maar zo te zien wel)

[ Voor 40% gewijzigd door RobIII op 27-10-2004 17:18 ]

[Verwijderd]

djluc...

Serieus, deze vraag heb ik al meerdere malen voorbij zien vliegen hier op tweakers. Wat je moet doen is het volgende:

Je voegt een link in en geeft hem een ID mee zodat je hem later kan benaderen.
Dan zoek je hier op tweakers naar een stuk code dat ik al meerdere malen gepost heb. Het is een functie die een bepaalde Node kan selecteren. Werkt voor zowel IE als Gecko.
Dan geef je die functie dus het nieuw link object mee en klaar is kees.

Zoek maar op: selectNodeContents o.i.d.

[RobIII]

Verwijderd schreef op 27 oktober 2004 @ 17:44:
Je voegt een link in en geeft hem een ID mee zodat je hem later kan benaderen.

Daar zit de kneep nou net. Hij heeft text geselecteerd en wil er een link van maken maar hij verliest zijn selectie omdat 'ie een textbox gebruikt...

[Verwijderd]

RobIII schreef op 27 oktober 2004 @ 17:49:
[...]

Daar zit de kneep nou net. Hij heeft text geselecteerd en wil er een link van maken maar hij verliest zijn selectie omdat 'ie een textbox gebruikt...

Een beetje intelligente editor die houdt bij wat de selectie was... Anders blijf je altijd dit soort problemen houden. De functie die ik hem wou laten zoeken gebruikt ook een nextavenue.getRange() methode om de laatste range op te halen. Je moet de range dus bufferen.

[djluc]

Ik heb even nextaveanu bekeken maar die maakt ook gebruik van een echte popup dus daar is het probleem niet aanwezig. Verder is je broncode zoals ik deze kon vinden onleesbaar gemaakt door het ontbreken van enige layout dus dat maakt het ook niet eenvoudiger. Je NextAvenue.prototype.insertHTML functie staat inderdaad op GOT maar de funtie getSelection wordt alleen maar aangeroepen en ik weet dus niet wat die doet.

@rob: execCommand('CreateLink') wordt ook gebruikt. Alleen gebruik ik niet de ingebouwde interface omdat ik een aantal speciale eisen heb.

[Verwijderd]

Ik doelde op deze functie:

[rml]Jorgen in "[ js] cursorplaats"[/rml]

getRange en getSelection halen het range en selection object op. Ik heb ook twee private functie setSelection en setRange die het range object zetten. Je moet op bepaalde momenten het range object saven om te voorkomen dat die verloren gaat. Bijvoorbeeld in jou geval.
Wanneer je dus nog een range object hebt, kan je er bewerkingen op uitvoeren.

[djluc]

Bedankt voor je linkje! Wat zijn de arumenten? Node lijkt me duidelijk, dat is gewoon het object wat je wilt aanpassen. Wat is echter pos? Om het even algemeen te maken probeer ik om de functie algemeen bruikbaar te maken zodat we deze vragen algemeen eenvoudig kunnen behandelen omdat jouw code erg op nextavenue gebaseerd is. Zodra ik het werkend heb zal ik het danook hier posten.

Even de code quoten voor de volledigheid:

Java:

// ^^ geen Java, maar JavaScript, doe ik voor syntaxhighlighting.

// Selects the contents inside the given node 
NextAvenue.prototype.selectNodeContents = function(node, pos) {
    var range, n = nextavenue;;
    var collapsed = (typeof pos != "undefined");
    if (n.browser.isIE) {
        range = n.getFrame().document.body.createTextRange();
        range.moveToElementText(node);
        (collapsed) && range.collapse(pos);
        range.select();
    } else {
    var sel = n.getSelection();
    range = n.getFrame().document.createRange();
    range.selectNodeContents(node);
    (collapsed) && range.collapse(pos);
    sel.removeAllRanges();
    sel.addRange(range);
    }
  n._setRange(range);
};

[Verwijderd]

Ik stel voor dat je zelf de code eens gaat bekijken, gaat kijken waar het pos argument op slaat, waar die in de code gebruikt wordt. Als je niet weet wat voor argument hij dan heeft bij een ingebakken functie, ik noem een collapse, dan zoek je dat op.
Kan wel alles voorkauwen, maar daar leer je uiteindelijk minder van.