selectionStart in einen div

[koki]

hallo, ich möchte wysiwyg editor nachbauen, die soll in einem div geschehen. den div bereich habe ich mit "contenteditable" auf schreibbar gesetzt.
jetzt suche ich bloß noch eine mehtode, um bei einen markierten bereich den start und den endbereich zu finden. bei einer textarea geschieht das mit "selectionStart", aber dies geht ja nun bei einem div/span nicht, soweit ich das weiß. gibt es dafür eine andere methode, damit ich den selektierten bereich eindeutig zuweisen kann, damit bei doppelten wörtern auch nur das selektierte bearbeitet wird

danke schonmal für antworten,

ps.: achja ich lerne gerade ncoh javascript, kann es zwar schon relativ, aber noch nicht perfekt ;)

[molily]

Hallo,

jetzt suche ich bloß noch eine mehtode, um bei einen markierten bereich den start und den endbereich zu finden.

Gecko:
window.getSelection() gibt ein
Selection-Objekt
Falls nötig mit Ranges arbeiten

IE:
document.selection.createRange() gibt ein
TextRange-Objekt

Die jeweiligen Objekte haben dann verschiedene Eigenschaften und Methoden, mit denen sich die Position im Knotenbaum und der markierte Text auslesen lassen, dass musst du mal durchschauen. Das Forumsarchiv dürfte auch einiges dazu hergeben.

Mathias

[koki87]

Gecko:
window.getSelection() gibt ein
Selection-Objekt
Falls nötig mit Ranges arbeiten

also irgendwie finde ich im forum nix passendes, da alle mit iframes oder textareas arbeiten. in einer textarea habe ich es ja schon zum laufen gebracht, bloß dieses "div" will nicht :(

getSelection() - liefert mir ja nur den inhalt, aber die konkrete position bekomme ich damit ja nicht, dies ist mein problem

bsp.: dies ist ein beispiel, dies funktioniert nicht
-> wenn ich nur "dies" markiere, bekomme ich es nur hin, dass er mir das erste z.b. fett macht, ich will aber das 2. fett haben, dazu bräcuhte ich die funktion

mfg julian

ps.: hoffe ich ihr könnt mich verstehen ;)

[molily]

Hallo,

getSelection() - liefert mir ja nur den inhalt, aber die konkrete position bekomme ich damit ja nicht, dies ist mein problem

Nein, über das zurückgegebene Selection-Objekt kannst du den Knoten in Erfahrung bringen, in dem der Text markiert ist, sowie Anfang und Ende im Text (anchorNode, anchorOffset, focusNode, focusOffset).
Wenn du dir die zugehörige Range über getRangeAt(0) geben lässt, kannst du m.W. genauer arbeiten (es gibt aber ähnliche Eigenschaften: startContainer/startOffset, endContainer/endOffset).

bsp.: dies ist ein beispiel, dies funktioniert nicht
-> wenn ich nur "dies" markiere, bekomme ich es nur hin, dass er mir das erste z.b. fett macht, ich will aber das 2. fett haben, dazu bräcuhte ich die funktion

Also für solche Operationen gibt es execCommand (1, 2). Da braucht man nicht mit Selections arbeiten, um den ausgewählten Text herauszukriegen, die Formatierung wird automatisch auf die Auswahl angewendet.

Mathias

[koki87]

hallöchen

Nein, über das zurückgegebene Selection-Objekt kannst du den Knoten in Erfahrung bringen, in dem der Text markiert ist, sowie Anfang und Ende im Text (anchorNode, anchorOffset, focusNode, focusOffset).
Wenn du dir die zugehörige Range über getRangeAt(0) geben lässt, kannst du m.W. genauer arbeiten (es gibt aber ähnliche Eigenschaften: startContainer/startOffset, endContainer/endOffset).

also, die tipps sind jetzt schon richtig gut, funktioniert auch für die erste selektion, wenn ich jetzt aber nochmal was markiere und dieses dann kursiv oder auch fett machen will, löscht der den text und fügt irgendwelchen kauderwelsch ein??

if (window.getSelection().isCollapsed == true)  
    {  
        die("gleiceh position");  
    }  
    else  
    {  
        if (window.getSelection().anchorOffset < window.getSelection().focusOffset)  
        {  
            alert("links-rechts")  
            var eingabeText = document.getElementById('textEdit').innerText;  
            var eingabeMark = window.getSelection();  
  
            var eingabeVoll = eingabeText.substring(0, window.getSelection().anchorOffset) + '<' + kommando + '>' +  
                                eingabeMark + '<\/' + kommando +'>' +  
                                eingabeText.substring(window.getSelection().focusOffset, eingabeText.length);  
  
            document.getElementById('textEdit').innerHTML = eingabeVoll;  
        }  
        else  
        {  
            alert("rechts-links")  
            var eingabeText = document.getElementById('textEdit').innerText;  
            var eingabeMark = window.getSelection();  
  
            var eingabeVoll = eingabeText.substring(0, window.getSelection().focusOffset) + '<' + kommando + '>' +  
                                eingabeMark + '<\/' + kommando +'>' +  
                                eingabeText.substring(window.getSelection().anchorOffset, eingabeText.length);  
  
            document.getElementById('textEdit').innerHTML = eingabeVoll;  
        }  
    }

die ausgabe vor und nach der 2. formatierung

1. formatierung dies ist <b>ein</b> großer test
2. formatierung d<b>großer</b>t <b>ein</b> großer test

mfg julian

ps.: die alerts sind nur für mich zu überprüfung oder und in welche schleife er rein geht

[koki87]

so nachtrag

habe es jetzt doch mit execCommand gemacht, wusste ja nicht, dass es so mächtig ist ;), danke nochmal molily

für diejenigen die es nachbauen wollen, ist auch nciht viel und geht mit jeden browser (ff3, opera 9.52, ie7)

function format_op(kommando)  
{  
    document.execCommand(kommando, false, null);  
}

<div id="main" style="padding-top:40px;">  
            <div id="texteditcontainer_1">  
                <button onmousedown="bild_eingabe()"> Bild Einf&uuml;gen </button>  
            </div>  
            <div id="texteditcontainer_2">  
                <br />  
                <button onmousedown="format_op('bold')">Text fetten</button>  
                <button onmousedown="format_op('italic')">Text kursiv</button>  
                <button onmousedown="format_op('strikethrough')">Text streichen</button>  
                <button onmousedown="format_op('underline')">Text unterstreichen</button>  
            </div>  
            <br />  
            <div id="textcontainer" align="center">  
                <div id="textEdit" style="text-align:left;"  
                    onmouseover="javascript:document.getElementById('textEdit').contentEditable='true'">  
                </div>  
                </div>  
            </div>  
        </div>

auf den button klicken und schon wird es fett