Обновление текста в поле contentEditable, пока пользователь печатает - PullRequest
Новая
       30

Обновление текста в поле contentEditable, пока пользователь печатает

2 голосов
/ 27 января 2020

Я пытаюсь создать редактор уценки WYSIWYG, используя <div> с атрибутом contentEditable.

Каждый раз, когда происходит событие keyup, я использую str.replace с регулярным выражением для найти экземпляры синтаксиса уценки. Например, в строке "this text is **bold**" я использую HTML, чтобы сделать текст в реальном времени жирным.

Однако при каждом нажатии клавиши и обновлении "псевдополя", курсор / курсор возвращается к началу. Я пробовал различные стратегии для его изменения, включая selectionStart и selectionEnd, но кажется, что эти атрибуты не применимы к <div> (они не определены). 

var editor = document.getElementById('editor');

editor.addEventListener('keyup', function (e) {
    var doc = editor.innerHTML;
    editor.innerHTML = doc.replace(/\*\*(\S(.*?\S)?)\*\*/gm, '<strong>$1</strong>');
});

(кредит этот ответ для регулярного выражения.)

Примечание: Мне известно, что подобные вопросы уже были опубликованы в StackOverflow, но большинство задавали 8-10 лет go и использовать jQuery. Интересно, появился ли в последнее десятилетие более современный и простой подход, использующий ваниль JS.

...