Мобильная версияЯ создаю небольшой редактор кода минимального размера для html/css/js. Я здесь новенький. Возникает проблема при написании в нем текста. Проблема в том, что у меня нет свободы писать текст там, где я хочу.
Например, если я наведу указатель мыши куда-нибудь в редакторе и напишу слово, указатель мыши немедленно вернется на другую строку. Таким образом, это мешает мне написать слово там, где я хочу, и слово пишется в другом месте. Как будто в некоторых точках строк стоят блоки, которые мешают писать.
Возможно, проблема вызвана HTML, который ограничивает вставку слов и, следовательно, изменение в редакторе кода, поскольку он соответствует тому, как был написан HTML-код. Я не знаю.
Однако я написал html вот так, потому что мне нужно, чтобы строки в редакторе выглядели вот так (расположены и отображались одинаково):
Проблема возникает в следующих случаях:
[*]
Я пытаюсь написать слово в начале третьей строки
[*]
Я стараюсь написать слово сразу после
[*]
Я пытаюсь отредактировать «Это заголовок», между ними и «Это» пишется слово
[*]
Попробую написать слово сразу после
В каждом из этих случаев указатель мыши перемещается в другое место.
Как я могу иметь свободу писать и редактировать редактор кодов где угодно, то есть в любой части нотоносцев? (чтобы не менять позицию отображения 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(редактор); рамка.закрыть(); } шоуПредварительный просмотр()
