Mit "HTML einfügen" nach Auswahl

Ich in der Lage sein möchten, doppelklicken Sie auf wählen Sie einigen text in einem div, die dann löst eine JavaScript-Funktion, die fügt einige HTML-nachdem Sie den ausgewählten text, ähnlich wie die 'edit/reply" - Funktion in Google Wave.

Habe ich bereits festgestellt, wie Sie zum auslösen einer Funktion auf Doppel-Klick, es ist die Lokalisierung der Auswahl und anschließend einfügen von HTML nach es dass ist das problem.

InformationsquelleAutor Lucy | 2010-08-30
  1. 14

    Die folgende Funktion fügt einem DOM-node (ein element oder text-Knoten) am Ende der Auswahl in allen gängigen Browsern (beachten Sie, dass Firefox erlaubt nun eine Mehrfachauswahl standardmäßig aktiviert; im folgenden wird nur die erste Auswahl):

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

    Wenn Sie lieber legen Sie eine HTML-Zeichenkette:

    function insertHtmlAfterSelection(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(false);

            //Range.createContextualFragment() would be useful here but is
            //non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        range.pasteHTML(html);
    }
}

    Update 18. Januar 2012

    Schließlich, hier ist eine version, die Einsätze HTML und behält die Auswahl (d.h. erweitert die Selektion um die ursprünglich ausgewählten Inhalt plus dem eingefügten Inhalt).

    Live-demo: http://jsfiddle.net/timdown/JPb75/1/

    Code:

    function insertHtmlAfterSelection(html) {
    var sel, range, expandedSelRange, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            expandedSelRange = range.cloneRange();
            range.collapse(false);

            //Range.createContextualFragment() would be useful here but is
            //non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            //Preserve the selection
            if (lastNode) {
                expandedSelRange.setEndAfter(lastNode);
                sel.removeAllRanges();
                sel.addRange(expandedSelRange);
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        expandedSelRange = range.duplicate();
        range.collapse(false);
        range.pasteHTML(html);
        expandedSelRange.setEndPoint("EndToEnd", range);
        expandedSelRange.select();
    }
}
    • Danke. Ich werde geben diesem einen Versuch.
    • ist es möglich, dass die Auswahl nach dem einfügen des html? Jetzt fügen Sie den html-aber dann wird die Auswahl verloren.
    • Konservieren wie? Meinst du, dass die selectio erweitert, um umfassen die eingefügten Inhalte? Ich nehme an dass und nach eine überarbeitete version...
    • und fertig.
    • Jede chance, die Sie könnte helfen, mit diesem Tim? stackoverflow.com/questions/24935573/...
    InformationsquelleAutor Tim Down
  2. 1

    Fenster.getSelection() erhalten Sie den ausgewählten text (Dokumentation).
    Sie können die jQuery.nach() (Dokumentation) neu einfügen html nach einem element ein.

    Sich auf Ihren ausgewählten text-Funktion aufrufen, haben Sie, um eine Schleife durch alle DOM-Elemente, überprüfen Ihre x&y-Position auf der aktuellen cursor-position - Holen Sie sich die nächsten Elements und das einfügen nach oder verwenden die Funktion .elementFromPoint(x,y) (Dokumentation)

    Dies ist der beste Weg, ich kann derzeit denken. Es ist nicht perfekt, aber es ist irgendwo zu beginnen.

    • Wie erhalten Sie die Koordinaten für den ersten Platz? Da window.getSelection() zurück nicht jede x -, y-Koordinaten
    InformationsquelleAutor Bob
  3. 0

    Ich weiß nicht, ob es möglich ist, aber wenn ich von einer partiellen Lösung.

    Auf Ihre Doppelklick-Ereignis können Sie die event-Objekt und den Zugriff auf die Eigenschaft target.

    Dass das target-element, Sie können den ausgewählten text.

    Nun das target-html-element und finden Sie den index des ausgewählten Textes und die Länge, Spritzen Sie Ihre html-Code auf der index + length position.

    Ich denke, dass Sie schon sah das problem, konnte es mit dem text an mehreren stellen. Um es zu lösen, die Sie haben könnten zu finden, die position des Cursors und zu vergleichen, um das element, ich weiß nicht, wie zu tun, dass...

    Hoffe ich konnte ein wenig helfen.

    InformationsquelleAutor BrunoLM
Schreibe einen Kommentar