document.execКоманда insertText не работает в IE - PullRequest
Новая
       5

document.execКоманда insertText не работает в IE

0 голосов
/ 14 февраля 2020

Я так стараюсь найти решение моей проблемы с прошлой недели. document.execCommand('insertText', false, emo) эта строка кода работает для всех браузеров, кроме IE (Inte rnet Explorer 11). Для IE я написал метод insertTextAtCursor, который всегда вставляет сначала в редактируемый контент.

Моя проблема в том, как вставить текст в contentEditable в точке курсора для IE? Заранее спасибо. 

var insertTextAtCursor = function (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();

        // 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.innerText = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ((node = el.firstChild)) {
          lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
          range = range.cloneRange();
          range.setStartAfter(lastNode);
          range.collapse(false);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    } else if (document.selection && document.selection.type != "Control") {
      // IE < 9
      document.selection.createRange().pasteHTML(html);
    }
  };

1 Ответ

0 голосов
/ 17 февраля 2020

document.execCommand ('insertText', false, emo)

Не найден вышеуказанный код из функции insertTextAtCursor, когда и где вы используете функцию insertTextAtCursor и метод execCommand ? Из этой статьи кажется, что метод execCommand поддерживает браузер IE. И я создал пример, используя ваш код, кажется, что все работает хорошо, пожалуйста, проверьте его: 

<div id="thing" contenteditable="true" style="width:200px; border :1px solid black; cursor:pointer">
    this is a some random foo bar jumps over a stick test
</div>

<input type="button" value="Add" onclick="insertTextAtCursor('aaaa');" />
<script>
    var insertTextAtCursor = function (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();

                // 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.innerText = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);

                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(false);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    };
</script>

Вывод, как показано ниже:

enter image description here

...