Мобильная версияЯ создаю небольшой редактор кода минимального размера для html/css/js. Возникает проблема при написании в нем текста. Проблема в том, что у меня нет свободы писать текст там, где я хочу. Где бы я ни писал/редактировал, указатель мыши автоматически перемещается на третью строку, не оставаясь на месте в той точке, где я пишу.
Например, если я наведу указатель мыши куда-нибудь в редакторе и напишу слово, указатель мыши сразу вернется на другую строку. Таким образом, это мешает мне написать слово там, где я хочу, и слово пишется в другом месте. Как будто в некоторых точках строк стоят блоки, которые мешают писать и я не смогу писать там, где хочу.
Сначала я думал, что проблема в HTML, затем мне указали, что проблема в том, что Установите позицию курсора в конец текстового кода в applyColor() функция. Значит, это проблема Javascript:
... // Устанавливаем позицию курсора в конец текста // document.querySelector('#editor').focus() вар ребенок = e.target.children; диапазон вар = document.createRange(); вар сел = window.getSelection(); range.setStart(child[child.length - 1], 1); диапазон.коллапс (истина); sel.removeAllRanges(); sel.addRange(диапазон); это.фокус(); Однако я написал html вот так, потому что мне нужно, чтобы строки в редакторе выглядели вот так (расположены и отображались одинаково):
Я покажу вам, когда возникнет проблема. В каждом из этих случаев указатель мыши берется в другое место и я не смогу писать там, где хочу. Я считаю, что, решив уникальную проблему в HTML, все проблемы будут автоматически решены, поскольку все они зависят от одной и той же уникальной проблемы.
[*]
Если я попытаюсь написать слово в начале третьей строки
[*]
Если я попытаюсь написать слово сразу после
[*]
Если я попытаюсь отредактировать Это заголовок, он запишет слово между и This
[*]
Если я попробую написать слово сразу после
Как я могу иметь свободу писать и редактировать код в редакторе где захочу, то есть в любой части строк? (без изменения позиции отображения h1 и p)
index.html
Это заголовок Это абзац.
ПРОСМОТР
style.css
#editor { ширина: 400 пикселей; высота: 100 пикселей; отступ: 10 пикселей; цвет фона: #444; белый цвет; размер шрифта: 14 пикселей; семейство шрифтов: моноширинный; пробел: pre; } .заявление { оранжевый цвет; } javascript.js
function applyColoring(element) { var ключевые слова = ["DIV", "DIV", "H1", "H1", "P", "P", "HELLO", "", "/"]; вар 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 = разметка; } // ИЗМЕНИТЬ ЦВЕТ функция изменения цвета() { // Событие нажатия клавиши document.querySelector("#editor").addEventListener("keyup", (e) => { // // Нажата клавиша пробела // если (e.keyCode == 32) { applyColoring(e.target); // Устанавливаем позицию курсора в конец текста // document.querySelector('#editor').focus() вар ребенок = e.target.children; диапазон вар = document.createRange(); вар сел = window.getSelection(); range.setStart(child[child.length - 1], 1); диапазон.коллапс (истина); sel.removeAllRanges(); sel.addRange(диапазон); это.фокус(); // } }); } изменить цвет() applyColoring(document.getElementById('editor')); //ПРОСМОТР функция showPreview() { var editor = document.getElementById("editor").innerText; // вар cssCode = // "" + document.getElementById("cssCode").value + ""; // вар jsCode = // "" + document.getElementById("jsCode").value + ""; varframe = document.getElementById("окно предварительного просмотра").contentWindow.document; document.getElementById("окно предварительного просмотра").srcdoc = редактор; рамка.открыть(); //frame.write(htmlCode + cssCode + jsCode); Frame.write(редактор); рамка.закрыть(); } шоуПредварительный просмотр()
