Мобильная версияСмотрите пример ниже. Он создает редактируемый элемент div с цветными HTML-тегами. Когда я пытаюсь написать сразу после цветного тега, то следующее слово тоже окрашивается. Слово также окрашивается, если я использую пробел после тега. Однако слово, следующее за тегом, не должно быть цветным, поскольку я указал только красный цвет для ["DIV", "H1", "P", "", "/"].
Пример:
Как избежать окрашивания текста после красных тегов? (учтите, что Пример 1 и 2 — это всего лишь пример текста и что в будущем я добавлю другие теги разных цветов). Я бы хотел, чтобы слова, набранные после тегов html, были черными, как указано в CSS, где #editor имеет color: black
Проблема должна быть в функции changeColor().
P.S: Будьте осторожны и не используйте решение, которое ломает указатель мыши при написании и автоматически перемещает указатель на вторую или третью строку, потому что, видимо, это легко может произойти в случае моего кода.
function applyColoring(element) { var ключевые слова = ["DIV", "H1", "P", "", "/"]; вар newHTML = ""; // Проходим по словам стр = element.innerText; (куски = ул .split(new RegExp(keywords.map((w) => `(${w})`).join("|"), "i")) .filter(логическое значение)), (разметка = chunks.reduce((acc, chunk) => { acc += ключевые слова.includes(chunk.toUpperCase()) ? `${chunk` : `${chunk`; возврат акк; }, "")); element.innerHTML = разметка; } // ИЗМЕНИТЬ ЦВЕТ функция изменения цвета() { var editor = document.getElementById("редактор"); applyColoring (редактор); // Устанавливаем позицию курсора в конец текста вар ребенок = редактор.дети; диапазон вар = document.createRange(); вар сел = window.getSelection(); range.setStart(child[child.length - 1], 1); диапазон.коллапс (истина); sel.removeAllRanges(); sel.addRange(диапазон); редактор.фокус(); } функция showPreview() { вар editorContent = document.getElementById("editor").innerText; varframe = document.getElementById("окно предварительного просмотра"); // Создаем URL-адрес данных с HTML-контентом var dataURL = "data:text/html;charset=utf-8", + encodeURIComponent(editorContent); // Установите атрибут iframe src для URL-адреса данных Frame.src = URL-адрес данных; } изменить цвет() showPreview() #editor { ширина: 456 пикселей; высота: 267 пикселей; отступ: 10 пикселей; цвет фона: #ffffff; черный цвет; размер шрифта: 14 пикселей; семейство шрифтов: моноширинный; пробел: pre; } .заявление { цвет: RGB(212, 42, 42); Это заголовок Это абзац.
ПРОСМОТР
