Fügen Sie ein HTML-element in eine contentEditable-element

Ich habe eine contentEditable div-wo soll ich das einfügen von HTML-tags (ein einfaches span-element).

Gibt es eine cross-browser-Lösung, die mir erlaubt, legen Sie die tags über meine div-Auswahl oder Cursorposition. Wenn etwas anderes ausgewählt ist, auf die Seite (nicht in den div -), möchte ich anfügen, das tag an das Ende der div.

Dank

Verwenden Sie eine JS-Bibliothek?
Ich benutze jQuery...

InformationsquelleAutor Elie | 2011-01-28

  1. 7

    Hier ist ein kickstart

    //get the selection range (or cursor     position)
var range = window.getSelection().getRangeAt(0); 
//create a span
var newElement = document.createElement('span');
newElement.id = 'myId';
newElement.innerHTML = 'Hello World!';

//if the range is in #myDiv ;)
if(range.startContainer.parentNode.id==='myDiv') {
   //delete whatever is on the range
   range.deleteContents();
   //place your span
   range.insertNode(newElement);
}

    Habe ich nicht den IE, aber funktioniert gut auf firefox, chrome und safari. Vielleicht möchten Sie spielen mit range.startContainer, fahren Sie nur Fort, wenn Sie die Auswahl erfolgt auf der contentEditable div.

    EDIT: Nach quirksmode-Bereich intro Sie haben, um das Fenster zu ändern.getSelection() Teil zu IE kompatibel.

    var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { //should come last; Opera!
    userSelection = document.selection.createRange();
}
    Danke für deine schnelle Antwort. Löst es nicht mein problem, es ist ein fehlender Teil: ich möchte Sie den Knoten nur in der div selbst wenn der Benutzer versucht, zu wählen anderswo... Wie kann ich überprüfen, ob der Benutzer auswählen, innerhalb des div?
    die Palette.startContainer (wie ich schon schrieb, auf die Antwort) gibt das DOM-element, wo die Auswahl beginnt. Sie können überprüfen, ob das element ist dein div vor dem einfügen der neuen Inhalte.
    Genial... danke!
    nur fügte der if-Anweisung
    Sie haben nicht wirklich adressiert die IE-Teil, und die prüfen, ob der Bereich ist innerhalb der <div> schwach ist: er gibt das falsche Ergebnis, wenn der Bereich beginnt, in ein verschachteltes element, oder wenn der Bereich nicht innerhalb eines text-Knotens, oder wenn die Reihe endet außerhalb der <div>.

    InformationsquelleAutor Mauricio

Schreibe einen Kommentar