Заменить слово перед курсором, когда несколько строк в contenteditable - PullRequest
Новая
       14

Заменить слово перед курсором, когда несколько строк в contenteditable

0 голосов
/ 12 июня 2018

Я хочу заменить слово перед курсором в contenteditable div (см. Также Обнаружение последнего написанного слова при вводе TAB в текстовой области или contenteditable div ).

Следующий код:

  1. полностью работает для первого абзаца contenteditable div

  2. не работает для следующих абзацев contenteditable div:

    Uncaught IndexSizeError: Не удалось выполнить 'setStart' для 'Range': смещение 71 больше длины узла (38).

Как мне изменить следующий код, чтобы он работал при нажатии клавиши TAB во 2-й строке contenteditable div? 

document.addEventListener("keydown", function(e) {
    var elt = e.target;
    if (elt.isContentEditable)
    {        
        if (e.keyCode == 9) {
            e.preventDefault();
            elt.focus();
            range = document.getSelection().getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(elt, 0);
            var words = range.toString().trim().split(' ');
            var lastWord = words[words.length - 1];
            if (lastWord) {
                var wordStart = range.toString().lastIndexOf(lastWord);
                var wordEnd = wordStart + lastWord.length;
                range.setStart(elt.firstChild, wordStart);
                range.setEnd(elt.firstChild, wordEnd);
                range.deleteContents();
                document.execCommand('insertText', false, "hello\nnewline");
                elt.normalize();
            }
        }
    }
});
<div contenteditable>Hello, click here and press TAB to replace this WORD<br>Also click here and press TAB after this ONE</div>

Примечание: я уже проверил ответ из Заменить определенное слово на contenteditable , но оно не работает, когда естьнесколько строк в contenteditable div.

1 Ответ

0 голосов
/ 13 июня 2018

Это работает: 

document.addEventListener("keydown", function(e) {
    var elt = e.target;
    if (elt.isContentEditable)
    {        
        if (e.keyCode == 9) {
            e.preventDefault();
            elt.focus();
            sel = document.getSelection();
            sel.modify("extend", "backward", "word");
            range = sel.getRangeAt(0);
            console.log(range.toString().trim());
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = '<b>test</b> and a <a href="hjkh">link</a>';
            var frag = document.createDocumentFragment(), node;
            while (node = el.firstChild) {
                frag.appendChild(node);
            }
            range.insertNode(frag);
            range.collapse();
        }
    }
});
<div contenteditable>Hello, press TAB to replace this WORD<br>Also press TAB after this ONE</div>

Это полное решение для textarea и contenteditable div.

...