Установка кареты в contenteditable div - PullRequest
Новая
       11

Установка кареты в contenteditable div

0 голосов
/ 18 сентября 2018

с помощью некоторых тем здесь я наконец нашел безопасный способ получить положение курсора / курсора в контрагенте DIV.(Ссылка: Получить позицию каретки в contentEditable div )

Я использую следующую функцию: 

function getCaretPosition(element) {
var caretOffset = 0;
if (w3) {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
} else if (ie) {
    var textRange = document.selection.createRange();
    var preCaretTextRange = document.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}

Так вот мой HTML: 

<div id="result" contenteditable="true">

This is an example with <span style="color:#f00;">red</span> color<br>
This is an example with <span style="color:#f00;">red</span> color<br><br>
This is an example with <span style="color:#f00;">red</span> color

</div>

И функция всегда возвращает правильную позицию каретки (например, когда я считаю ее вручную;) независимо от того, имеются ли разрывы строк или элементы html.

На втором шаге я выполняю операцию на стороне сервера с помощьюсодержимое моего div и поместите ответ / «новый» текст обратно в тот же div (поэтому я заменяю старое содержимое новым содержимым, но нет никаких символьных операций, просто вставляем html-теги, чтобы отметить несколько слов, например, позициибукв не меняется).

После использования, например, $ ("# result"). html (ifiedtext);каретка будет помещена в начале div.Вот проблема: я хочу, чтобы каретка была установлена ​​в то же положение, что и до выполнения операции замены текста.

Все примеры и функции, которые я обнаружил, не работают с многострочными contenteditable элементами div.

Я был бы очень признателен, если бы кто-нибудь показал мне или объяснил, как мне добиться этой функциональности.Чистый JS или JQuery в порядке.

...