Convert Textarea To an Editor In Few Minutes

ACE Editor, Customizable theme and language

Photo by Taras Shypka on Unsplash

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

HTML

<script src="//unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<pre class="editor">
function my() {
  console.log('Hi, ACE Editor!');
}
</pre>

CSS

.editor {
  display: block;
  position: relative;
  min-height: 200px;
  height: 100%;
}

JS

const editorEl = document.querySelector('.editor');
const editor = window.ace.edit(editorEl);
editor.setTheme(`ace/theme/monokai`);
editor.session.setMode(`ace/mode/javascript`);
editor.on('change', data => {
  console.log('edited result', data);
});

https://stackblitz.com/edit/medium-ace-editor

Do you think this is useful? If so please;
* Clap 👏 button below️ to let others to see this too.
* Follow Allen on Twitter (@allenhwkim)

Happy Coding :)

Jul 22nd, 2021
Allen Kim