Toon posts:

[JS] RTE cursor terug plaatsen na execCommand

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik ben bezig een WYSIWYG RTE te maken in IE met Javascript.
Ik heb in html een knoppenbalkje gemaakt die telkens functies aanroept en uitvoert op een iframe waarin geedit wordt.

Bold, Italic, etc werken allemaal perfect op het moment dat ik eerst tekst selecteer. Nu wil ik het zo maken dat het ook werkt als de cursor ergens staat. Als je dan verder typt, dan moet hij in bijvoorbeeld Bold verder gaan. Iemand een idee hoe ik dat voor elkaar kan krijgen?

Ik druk nu op een knop die roept bijvoorbeeld doeCommando('bold') aan. Die doet nu het volgende en werkt alleen mooi op het moment dat ik tekst of een afbeelding heb geselecteerd.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function doCommand(cmd)
{
 if(textSelected() || imageSelected())
 {
        //doe het commando en selecteer de selectie weer
    var pointer = foo.document.selection.createRange();
    var pointer_store = pointer.duplicate();
    foo.document.execCommand(cmd);
    pointer_store.select();
 }
 else if(isCursorInTable())
 {
            //doe het commando en plaats de cursor terug op de plek
 }
}


Probleem is dus dat zodra ik op de button klik ik de cursorpositie kwijt ben. Thanks voor elke tip of hulp.

  • t-x-m
  • Registratie: November 2003
  • Laatst online: 05-01 18:35

t-x-m

.NET Nerd

JavaScript:
1
document.getElementById('elelent').focus()

?

[ Voor 21% gewijzigd door t-x-m op 01-06-2006 10:46 ]

GC.Collect();


Verwijderd

Topicstarter
Ik ben al iets verder. Het werkt nu als ik op de button druk. Alleen werkt het nu niet meer als ik CTRL-B doe. Deze vang ik af en doe dan ook doCommand('bold'); Wat kan dan het verschil zijn?

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function doCommand(cmd)
{
 if(textSelected() || imageSelected())
 {
        //doe het commando en selecteer de selectie weer
    var pointer = foo.document.selection.createRange();
    var pointer_store = pointer.duplicate();
    foo.document.execCommand(cmd);
    pointer_store.select();
 }
 else if(isCursorInTable())
 {
            //doe het commando en plaats de cursor terug op de plek
    var pointer = foo.document.selection.createRange();
    foo.document.execCommand(cmd);
    pointer.select();
    pointer.focus();
 }
}

Verwijderd

Topicstarter
dit is de oplossing:

code:
1
2
3
4
5
6
7
    else if(isTextSelected() || isImageSelected() || isCursorInTableCell())
    {
        var pointer = foo.document.selection.createRange();
        foo.document.execCommand(cmd);
        if(isTextSelected() || isImageSelected()) pointer.select();
        pointer.focus();
    }

Verwijderd

Topicstarter
Even een ander vraagje waarvan ik hoop dat iemand zo ziet wat ik fout doe.

Ik vervang <P> tags in <BR> in mijn RTE omdat dat voor de gebruiker handiger is.
Als je nu een stuk tekst selecteerd en dan een lijst invoegt dan moet hij eigenlijk de <BR> tags weer even terug zetten naar <P> en dan die lijst op de selectie uitvoeren, zodat hij alles wat op een nieuwe rij begon ook een listitem maakt.

code:
1
2
3
4
var pointer = foo.document.selection.createRange();
pointer.pasteHTML(pointer.htmlText.replace(/<br>/gi, '<P>'));
foo.document.execCommand(cmd);
pointer.focus();


Op de een of andere manier is hij na het replacen de pointer kwijt en gaat het execCommand niet goed. Bedankt voor hulp.

[ Voor 25% gewijzigd door Verwijderd op 01-06-2006 13:48 ]