Как реализовать пользовательский редактор кода с помощью HTML/JavaScript?

привет, я пытаюсь создать подсветку синтаксиса в своем веб-текстовом редакторе, и моя функция работает, но не одновременно, я не знаю, почему

когда я набираю слово: Как реализовать пользовательский редактор кода с помощью HTML/JavaScript?

а в редакторе: Как реализовать пользовательский редактор кода с помощью HTML/JavaScript?

это код:

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,"&#9;"));
}


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
}

Я пытался заставить его изменить цвет

Добро пожаловать в StackOverflow. Пожалуйста, добавьте минимальный воспроизводимый пример к вопросу для более быстрого устранения неполадок.

blurfus 27.12.2022 19:33

Вам лучше использовать редактируемый элемент

dreambold 27.12.2022 19:47
codepen.io/dreambold/pen/eYjJWGq?editors=1011 Взгляните на это
dreambold 27.12.2022 19:55

@DreamBold спасибо, но зачем менять сторону, когда я печатаю?

Gmos 27.12.2022 20:19
i.imgur.com/GWe3hdX.png Это работает так, если вы собираетесь создавать свой собственный редактор, вам лучше его улучшить, в противном случае вам лучше использовать готовое решение, например ACE, т.к. Я упомянул в ответе. :)
dreambold 27.12.2022 20:25

@DreamBold nvm спасибо <3

Gmos 27.12.2022 20:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
6
61
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы не можете сделать это внутри , а не редактируемого. Похоже, вам нужен WYSIWYG-редактор, большинство из которых используют для этого a.

Для этого есть несколько вариантов JavaScript:

я пытаюсь сделать редактор кода, как визуальный код

Gmos 27.12.2022 20:14

О, понял. В этом случае, я думаю, лучше использовать div contenteditable.

David F 27.12.2022 20:15
Ответ принят как подходящий

Итак, вот что я пробовал, следуя вашему подходу, он все еще нуждается в улучшении, ты:

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, "&#9;")
  );
}

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 Это не так сложно реализовать. Надеюсь, поможет!

Другие вопросы по теме