Contenteditable text-editor und der cursor-position

Wie kann ich (mit Hilfe von jquery oder anderen) html einfügen an der cursor/Einfügemarke position meines contenteditable div:

<div contenteditable="true">Hello world</div>

Zum Beispiel, wenn Sie den cursor/Einfügemarke zwischen "Hallo" und "Welt", und der Benutzer dann auf eine Taste, zB "Bild einfügen", dann mit javascript, so etwas wie <img src=etc etc> eingefügt würde zwischen "Hallo" und "Welt". Ich hoffe, ich habe deutlich gemacht =S

Beispiel-code wäre sehr dankbar, vielen Dank!

InformationsquelleAutor Cal S | 2010-05-30

  1. 9

    Die folgende Funktion fügt einem DOM-node (ein element oder text-Knoten) an der cursor-position in allen mainstream-desktop-Browser:

    function insertNodeAtCursor(node) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            sel.getRangeAt(0).insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

    Wenn Sie lieber legen Sie eine HTML-Zeichenkette:

    function insertHtmlAtCursor(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            node = range.createContextualFragment(html);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

    Habe ich angepasst diese aus meiner Antwort auf eine ähnliche Frage: So finden Sie cursor-position in eine contenteditable DIV?

    InformationsquelleAutor Tim Down

  2. 2

    Mit contenteditable Sie verwenden sollten,execCommand.

    Versuchen document.execCommand('insertImage', false, 'image.jpg') oder document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />'). Die zweite funktioniert nicht in älteren IE.

    Vielen Dank - das funktioniert gut in Chrome. Ich musste insertHTML um alt - tags, um ein Bild; insertImage gescheitert.
    Dies funktioniert nicht in safari für iOS-Anwendung. Es ist nicht das einfügen von html-strings mit Bild tage oder Befestigung an der cursor-position. Können Sie schlagen einige Lösung.

    InformationsquelleAutor Znarkus

  3. 0

    in diesem code habe ich nur ersetzen, html code mit (") zu (')

    verwenden Sie die folgende syntax: 

    $("div.second").html("your html code and replace with (")to(')  ");

    InformationsquelleAutor yash patel

  4. -1

    Ich würde empfehlen die Verwendung der jquery-plugin a-tools

    Dieses plugin hat sieben Funktionen:

    * getSelection – return start, end position, length of the selected text and the selected text. return start=end=caret position if text is not selected;
* replaceSelection – replace selected text with a given string;
* setSelection – select text in a given range (startPosition and endPosition);
* countCharacters – count amount of all characters;
* insertAtCaretPos – insert text at current caret position;
* setCaretPos – set cursor at caret position (1 = beginning, -1 = end);
* setMaxLength – set maximum length of input field. Also provides callback function if limit is reached. Note: The function has to have a number as input. Positive value for setting of limit and negative number for removing of limit.

    Die eine, die Sie brauchen, ist insertAtCaretPos: 

    $("#textarea").insertAtCaretPos("<img src=etc etc>");

    Es könnte ein draw-back: das Plugin funktioniert nur mit textarea-en Eingabe: - text-Elemente, so kann es zu Konflikten mit contenteditable.

    "Es könnte ein draw-back: das Plugin funktioniert nur mit textarea-en Eingabe: - text-Elemente, so kann es zu Konflikten mit contenteditable." Sie sind richtig. Es funktioniert nicht bei allen.

    InformationsquelleAutor Zilverdistel

Schreibe einen Kommentar