привет, я пытаюсь создать подсветку синтаксиса в своем веб-текстовом редакторе, и моя функция работает, но не одновременно, я не знаю, почему
когда я набираю слово:
а в редакторе:
это код:
const textarea = document.getElementById('editor');
updateText(textarea.value);
textarea.addEventListener("keydown", function(e) {
setTimeout(() =>{
updateText(textarea.value);
},0)
})
function updateText(text)
{
textarea.innerHTML = colorize(text.replace(/\n/g, "<br>").replace(/\t/g,"	"));
}
function colorize(text)
{
var words = ["int","class","#include","namespace"];
for(const keyword of words)
{
text = text.replaceAll(keyword,`<span style = "color:#569cd6">${keyword}</span>`)
text = text.replaceAll(keyword.toLowerCase(),`<span style = "color:#569cd6">${keyword.toLowerCase()}</span>`)
}
return text
}
Я пытался заставить его изменить цвет
Вам лучше использовать редактируемый элемент
@DreamBold спасибо, но зачем менять сторону, когда я печатаю?
@DreamBold nvm спасибо <3
Вы не можете сделать это внутри , а не редактируемого. Похоже, вам нужен WYSIWYG-редактор, большинство из которых используют для этого a.
Для этого есть несколько вариантов JavaScript:
я пытаюсь сделать редактор кода, как визуальный код
О, понял. В этом случае, я думаю, лучше использовать div contenteditable.
Итак, вот что я пробовал, следуя вашему подходу, он все еще нуждается в улучшении, ты:
const textarea = document.getElementById("editor");
function moveCursorAtTheEnd() {
var selection = document.getSelection();
var range = document.createRange();
var contenteditable = document.querySelector('div[contenteditable = "true"]');
if (contenteditable.lastChild.nodeType == 3) {
range.setStart(contenteditable.lastChild, contenteditable.lastChild.length);
} else {
range.setStart(contenteditable, contenteditable.childNodes.length);
}
selection.removeAllRanges();
selection.addRange(range);
}
textarea.addEventListener("keydown", function (e) {
if (e.keyCode == 32 || e.keyCode == 13) updateText(textarea.textContent);
textarea.innerHTML = textarea.innerHTML + " ";
moveCursorAtTheEnd();
});
function updateText(text) {
textarea.innerHTML = colorize(
text.replace(/\n/g, "<br>").replace(/\t/g, "	")
);
}
function colorize(text) {
var words = ["int", "class", "#include", "namespace"];
for (const keyword of words) {
text = text.replaceAll(
keyword,
`<span style = "color:#569cd6">${keyword}</span>`
);
text = text.replaceAll(
keyword.toLowerCase(),
`<span style = "color:#569cd6">${keyword.toLowerCase()}</span>`
);
}
return text;
}
#editor {
background: lightgrey;
height: 100vh;
}
[contenteditable]:focus {
outline: 0px solid transparent;
}
<div contentEditable = "true" id = "editor" onfocus = "this.value = this.value;"></div>
В конце концов, для надежного редактора я бы порекомендовал вам использовать редактор ACE , вы можете посмотреть живую демонстрацию здесь: https://ace.c9.io/build/kitchen-sink. html Это не так сложно реализовать. Надеюсь, поможет!
Добро пожаловать в StackOverflow. Пожалуйста, добавьте минимальный воспроизводимый пример к вопросу для более быстрого устранения неполадок.