Uncaught IndexSizeError: Не удалось выполнить 'getRangeAt' в 'Selection': 0 не является допустимым индексом

Ответ 1

Проблема, похоже, специфична для WebKit; Я не смог воспроизвести его в IE или Firefox. Как уже говорилось в OP, ошибка в Google Chrome:

Uncaught IndexSizeError: не удалось выполнить 'getRangeAt' в 'Selection': 0 не является допустимым индексом

Safari имеет ту же проблему, но сообщение отличается:

INDEX_SIZE_ERR: исключение DOM 1: индекс или размер был отрицательным или больше допустимого значения.

Обычно это происходит в простых редакторах WYSIWYG. Пример:

<form name="frm">
    <div contenteditable="true" style="border:1px solid grey;height:8em;width:100%;">
    Text inside my editor.
    </div>
    Click this button to insert some text into the text editor:
    <button type="button" onclick="doInsert('TEST');">Insert</button>
    </form>
    <script>
    function doInsert(text) {
        var sel = window.getSelection && window.getSelection();
        if (sel) {
            var range = sel.getRangeAt(0);              // error here
            var node = document.createTextNode(text);
            range.deleteContents();
            range.insertNode(node);
        }
    }
    </script>

Ответ 2

У меня есть некоторое решение в моем проекте

использовать iframe в качестве редактора WYSIWYG

мы устанавливаем editwin как окно iframe

каждый раз, прежде чем вставлять что-то в редактор по коду, вы должны сначала использовать нижеприведенный код.

editwin.focus();
editwin.document.body.focus();

использовать textarea в качестве редактора

установите textobj как dom текстового поля

так же, как вверх, но другой код

textobj.focus();

Ответ 3

Вот что нужно рассмотреть: есть ли отключенный выбор где-то в вашем коде? Если это так, в некоторых ситуациях вам может потребоваться сначала включить выбор, предпочтительно в событии mousedown или , прежде чем фокусироваться на элементе (NB!), Прежде чем получить диапазон. Это решило мою версию проблемы.

$('#MyEditableDiv').on('mousedown', function (e) {

    $(document).enableSelection();


});