Heim > Web-Frontend > js-Tutorial > Wie füge ich in allen Browsern HTML an der Cursorposition in ein ContentEditable-Div ein?

Wie füge ich in allen Browsern HTML an der Cursorposition in ein ContentEditable-Div ein?

Linda Hamilton
Freigeben: 2024-11-17 11:52:01
Original
464 Leute haben es durchsucht

How to Insert HTML at the Cursor Position in a ContentEditable Div in All Browsers?

HTML an der Cursorposition in ein inhaltsbearbeitbares Div einfügen

Problemstellung

HTML einfügen, z. B.

Lösung

Um HTML direkt in andere Browser als IE einzufügen, verwenden Sie die Methode insertNode() des Range-Objekts:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

function pasteHtmlAtCaret(html) {

    var sel, range;

    if (window.getSelection) {

        // IE9 and non-IE

        sel = window.getSelection();

        if (sel.getRangeAt && sel.rangeCount) {

            range = sel.getRangeAt(0);

            range.deleteContents();

            var el = document.createElement("div");

            el.innerHTML = html;

            var frag = document.createDocumentFragment(), node;

            while (node = el.firstChild) {

                frag.appendChild(node);

            }

            range.insertNode(frag);

            range = range.cloneRange();

            range.setStartAfter(frag.lastChild);

            range.collapse(true);

            sel.removeAllRanges();

            sel.addRange(range);

        }

    } else if (document.selection && document.selection.type != "Control") {

        // IE < 9

        document.selection.createRange().pasteHTML(html);

    }

}

Nach dem Login kopieren

Aktualisierte Lösung mit Option zur Auswahl eingefügter Inhalte

Optional können Sie den eingefügten Inhalt mithilfe eines zusätzlichen Parameters auswählen:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function pasteHtmlAtCaret(html, selectPastedContent) {

    // ... Original code ...

    var firstNode = frag.firstChild;

    range.insertNode(frag);

    if (lastNode) {

        range = range.cloneRange();

        range.setStartAfter(lastNode);

        if (selectPastedContent) {

            range.setStartBefore(firstNode);

        } else {

            range.collapse(true);

        }

        sel.removeAllRanges();

        sel.addRange(range);

    }

    // ... Original code ...

}

Nach dem Login kopieren

Dieser Code bietet browserübergreifende Kompatibilität zum Einfügen von HTML an der Cursorposition und bietet bei Bedarf die zusätzliche Flexibilität, den eingefügten Inhalt auszuwählen.

Das obige ist der detaillierte Inhalt vonWie füge ich in allen Browsern HTML an der Cursorposition in ein ContentEditable-Div ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage