0

Oi, eu estava tentando criar um "editor de texto" para programar lua, eu tentei mudar a cor da palavra function toda vez que fosse digitada, mas me deparei com algo, não consigo estilizar nenhum elemento dentro da textarea, aqui está o codigo que eu estava usando:

var wait = "";
var txt = "";
words = [];

window.onkeydown = function(e) {
  txt = document.getElementById('b').value;
  var z = String(txt);
  if (String.fromCharCode(e.keyCode) == " ") {
    words.push(wait);
    wait = "";
  }
  var y = z.replace("function", "<span>hello</span>");
 document.getElementById('b').value = y

}
function myFunction(event) {
    if (window.event) {
      evt = window.event;
      wait = wait + String.fromCharCode(evt.keyCode);
      console.log(wait)
  };
}

1
  • 1
    textarea não aceita elementos, apenas texto. Por isso vc não pode estilizar partes do texto a não ser o texto todo.
    – Sam
    Commented 10/02/2018 às 11:41

2 Respostas 2

1

Uma maneira de se chegar ao resultado, é fazendo o seguinte:

Crie uma textarea vou setar o atributo id como editor_back.

<textarea id="editor_back"></textarea>

Aplique o CSS

#editor_back {
    color: transparent;
    background: transparent;
    border: 1px solid #ccc;
    position: absolute;
    padding: 10px;
    z-index: 5;
    height: 250px;
    width: 250px;
    font-family: 'Verdana';
    font-size: 0.875em;
}

Crie uma div vou setar o atributo id como editor_front.

<div id="editor_front"></div>

Aplique o CSS

#editor_front {
    background: #e9e9e9;
    border: 1px solid #ccc;
    padding: 10px;
    position: absolute;
    z-index: 1;
    height: 250px;
    width: 250px;
    font-family: 'Verdana';
    font-size: 0.875em;
}

Note que a div ficará abaixo da textarea, por isso definimos o background e color como transparentes.

Adicione o evento keypress na textarea

editor_back.addEventListener('keyup', function(e) {
    txt = editor_back.value;
    var y = txt.replace(/(function\s)([a-z]*)(\(\))/g, '<span class="func">function </span><span class="func_name">$2</span><span class="par">()</span>');
    y = y.replace(/(\s?)function\s/g, '<span class="func">$1function </span>');
    y = y.replace(/(\s?)\(\)/g, '<span class="par">$1()</span>');
    editor_front.innerHTML = y
});

Veja funcionando:

var txt = "";
var editor_front = document.querySelector('#editor_front');
var editor_back = document.querySelector('#editor_back');

editor_back.addEventListener('keyup', function(e) {
    txt = editor_back.value;
    var y = txt.replace(/(function\s)([a-z]*)(\(\))/g, '<span class="func">function </span><span class="func_name">$2</span><span class="par">()</span>');
    y = y.replace(/(\s?)function\s/g, '<span class="func">$1function </span>');
    y = y.replace(/(\s?)\(\)/g, '<span class="par">$1()</span>');
    editor_front.innerHTML = y
});
#editor_front {
  background: #e9e9e9;
  border: 1px solid #ccc;
  padding: 10px;
  position: absolute;
  z-index: 1;
  height: 250px;
  width: 250px;
  font-family: 'Verdana';
  font-size: 0.875em;
}

#editor_back {
  background: transparent;
  border: 1px solid #ccc;
  color: transparent;
  position: absolute;
  padding: 10px;
  z-index: 5;
  height: 250px;
  width: 250px;
  font-family: 'Verdana';
  font-size: 0.875em;
}

span.func {
  color: red;
}
span.func_name {
  color: #069;
  font-weight: bold;
}
span.par {
  color: green;
}

#ver_html {
  bottom: 0;
  position: absolute;
}
<div id="editor_front"></div>
<textarea id="editor_back" cols="30" rows="10"></textarea>

1

Eu vi por aí vários sistemas de Syntax Highlighting que eu entendi que é o caso, eu poderia te explicar como criar o seu próprio, fazer o textarea ficar invisível por CSS e atrás dele ter um DIV (com barra de rolagem) que formataria automaticamente o texto, mas precisaria entender muito de Expressão regular para converter o texto digitado já formatado para DIV visível.

Sem contar que teria que ter um método de auto-selecionar o texto da DIV se parte do texto escrito na TEXTAREA fosse selecionado.

Então não acho viável, o melhor mesmo é pegar essas APIs prontas pra isso:

Mas vai ficar a seu critério escolher um dos exemplos ou encontrar outro que combine com o sistema que você quer montar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .