Мобильная версияЯ создаю небольшой и минимальный редактор кода для HTML/CSS/js на простом Javascript. Возникает проблема при написании в нем текста. Проблема в том, что у меня нет свободы писать текст там, где я хочу, потому что где бы я ни писал/редактировал, указатель мыши автоматически перемещается на третью строку, а не остается на месте в той точке, где я пишу. Должна возникнуть проблема с установкой позиции курсора в конце текста.
Например, если я наведу указатель мыши куда-нибудь в редакторе и напишу слово, указатель мыши сразу вернется на другую строку (всегда в начало третьей строки). Таким образом, это мешает мне написать слово там, где я хочу, и слово пишется в другом месте. Как будто в некоторых точках строк стоят блоки, которые мешают писать и я не смогу писать там, где хочу.
Изначально я думал, что проблема в HTML, затем мне указали, что проблема в том, что Установить позицию курсора в конец текстового кода в applyColor() функция. Значит, это проблема JavaScript:
// ИЗМЕНИТЬ ЦВЕТ функция изменения цвета() { редактор var = document.getElementById("html"); applyColoring (редактор); // Устанавливаем позицию курсора в конец текста вар ребенок = редактор.дети; диапазон вар = document.createRange(); вар сел = window.getSelection(); range.setStart(child[child.length - 1], 1); диапазон.коллапс (истина); sel.removeAllRanges(); sel.addRange(диапазон); редактор.фокус(); } На самом деле, если я удалю этот фрагмент кода, проблемы будут решены. Но мне нужен этот фрагмент кода (или аналогичный), потому что он является частью функции раскраски текста. Поэтому мне нужно будет исправить этот фрагмент кода, но я не могу понять, как это сделать. Если я понимаю проблему, возможно, вам стоит создать лучший Range, но я не уверен.
Я покажу вам, когда возникнет проблема. В каждом из этих случаев указатель мыши берется в другое место и я не смогу писать там, где хочу. я считаю, что, решив уникальную проблему в функции applyColor(), все проблемы будут автоматически решены, поскольку все они зависят от одной и той же уникальной проблемы. [*]Если я попытаюсь написать слово в начале третьей строки
[*]
Если я попытаюсь написать слово сразу после
[*]
Если я попытаюсь отредактировать Это заголовок, он запишет слово между и This
[*]
Если я попытаюсь написать слово сразу после
ЧЕГО Я ХОЧУ? Я бы хотел, чтобы, когда я где-нибудь пишу слово, указатель мыши оставался неподвижным/остановился на последнем написанном слове (как, например, работает любой редактор или чат), и не должен автоматически перемещаться на третью строку (как на фотографиях выше). Например, вот так, я хотел бы получить это:
Но движения указателя в других областях линий тоже другие, о которых я не писал.
Как я могу иметь свободу писать и изменять код редактора, где захочу, и избежать перемещения указателя на другие нотоносцы? Итак, как следует настроить часть Установить позицию курсора в конец текстового кода функции applyColor()? Спасибо
index.html
Это заголовок Это абзац.
ПРОСМОТР
style.css
#html { ширина: 456 пикселей; высота: 267 пикселей; отступ: 10 пикселей; цвет фона: #444; белый цвет; размер шрифта: 14 пикселей; семейство шрифтов: моноширинный; пробел: pre; } .заявление { оранжевый цвет; } #редактор { } #предварительный просмотр { дисплей: блок; ширина: 100%; } javascript.js
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 = document.getElementById("html"); applyColoring (редактор); // Устанавливаем позицию курсора в конец текста вар ребенок = редактор.дети; диапазон вар = document.createRange(); вар сел = window.getSelection(); range.setStart(child[child.length - 1], 1); диапазон.коллапс (истина); sel.removeAllRanges(); sel.addRange(диапазон); редактор.фокус(); } // ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР const elHTML = document.querySelector("#html"); //const elCSS = document.querySelector("#css"); //const elJS = document.querySelector("#js"); const elPreview = document.querySelector("#preview"); функция showPreview() { const html = elHTML.textContent; //const css = `${elCSS.textContent`; //const js = `${elJS.textContent}`; const dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(html); изменить цвет(); elPreview.src = dataURL; } изменить цвет() шоуПредварительный просмотр()
