Fügen Sie Text am Cursor in einem editierbaren Div ein

Ich habe eine contenteditable div, wo muss ich das einfügen von text an der Cursor-position,

Dies kann leicht getan werden in IE durch document.selection.createRange().text = "banana"

Gibt es eine ähnliche Art und Weise der Umsetzung dieser in Firefox/Chrome?

(Ich weiß, dass eine Lösung existiert hier , aber es kann nicht verwendet werden, contenteditable div, und sieht ungeschickt)

Danke!

Kommentar zu dem Problem
Wenn Sie möchten, um html einfügen an der cursor, siehe stackoverflow.com/questions/6690752/... Kommentarautor: Kes115

InformationsquelleAutor der Frage user314362 | 2010-05-27

  1. 114

    Folgende Funktion einfügen von text an der Cursor-position und löschen Sie die vorhandene Auswahl. Es funktioniert in allen mainstream-desktop-Browser:

    function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

    UPDATE

    Basierend auf Kommentar, hier finden Sie den code für das speichern und wiederherstellen der Auswahl. Vor dem anzeigen des Kontextmenüs aus, speichern Sie den Rückgabewert von saveSelection in eine variable und dann übergeben Sie die variable in restoreSelection auf restore wird die Selektion nach dem ausblenden des Kontextmenüs und vor dem einfügen von text.

    function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

    InformationsquelleAutor der Antwort Tim Down

  2. 0
    1. Bekommen ein Selection-Objekt mit window.getSelection().
    2. Verwenden Selection.getRangeAt(0).insertNode() hinzufügen ein textnode.

    3. Falls erforderlich, verschieben Sie die cursor-position hinter dem text Hinzugefügt, mit Selection.modify(). (Nicht genormt, aber diese Funktion wird unterstützt in Firefox, Chrome und Safari)

      function insertTextAtCursor(text)
{
    let selection = window.getSelection();
    let range = selection.getRangeAt(0);
    range.deleteContents();
    let node = document.createTextNode(text);
    range.insertNode(node);

    for(let position = 0; position != text.length; position++)
    {
        selection.modify("move", "right", "character");
    };
}

    InformationsquelleAutor der Antwort Martin Wantke

  3. -2

    nur eine einfachere Methode mit jquery:

    kopieren Sie den gesamten Inhalt des div -

    var oldhtml=$('#elementID').html();

    var tobejoined='<span>hii</span>';

    //element with new html would be

    $('#elementID').html(oldhtml+tobejoined);

    einfach!

    InformationsquelleAutor der Antwort Alireza Mn

Schreibe einen Kommentar