Textarea similar to a Text Editor ex: VS Code

Asked

Viewed 40 times

-1

I wonder if you have more lib for React that leaves a textarea equal to VS Code for example? lib closest to what I found was the Codemirror, I would like more auternativas.

react

1 answer

1


If that’s what I understand, there’s the ACE Editor. Its implementation is easy, this link here: 1, you can check your manual, which is all very simple.

In addition, you can use several different themes and syntax of different languages as well.

Below, a complete minimum example. If not, I will remove the answer.

var editor = ace.edit("editor");

document.getElementById('editor').style.fontSize = '16px';

editor.setTheme("ace/theme/dracula");

editor.session.setMode("ace/mode/javascript");

editor.session.setTabSize(4);

editor.setOptions({
  autoScrollEditorIntoView: true,
  copyWithEmptySelection: true,
});

setTimeout(() => {
  var beautify = ace.require("ace/ext/beautify"); // get reference to extension
  beautify.beautify(editor.session);
}, 500);

//beautify.beautify(editor.session);
document.getElementById("formatar").onclick = function() {
  var beautify = ace.require("ace/ext/beautify"); // get reference to extension
  beautify.beautify(editor.session);
}
#editor {
  position: relative;
  width: 100%;
  height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-beautify.js"></script>

<div id="editor">
  function foo(items) { var x = "All this is syntax highlighted"; return x; }
</div>
<a href="../">Voltar</a>
<button id="formatar">Formatar</button>

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.