How can you embed a simple CODE EDITOR.

Today we're going to embed an code editor in website. I found a code editor called codemirror. which is lighter than monaco.

See my last article - Embed VSCode single file editor in your website. - DEV Community 👩‍💻👨‍💻

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

For features visit CodeMirror WebSite

Example

https://codepen.io/ksenginew/pen/gORJpQv

Example Explained

The easiest way to use CodeMirror is to simply load the script and style sheet , plus a mode script (Here I'm using Javascript mode script). For example:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/javascript/javascript.min.js"></script>

Then Create a dummy text box for your Editor

<textarea id="editor">
  your code here...
</textarea>

Having done this, an editor instance can be created like this:

let editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode:  "javascript"
});

Then enjoy it. I hope to write more articles with advanced use cases of embedded editor. Follow 🏃‍♂️ me for more articles. Ask🙏 any question on comments section. Star⭐ me if you love this article.

^{cover image by Unsplash}

Happy Coding 👩‍💻👩‍💻👩‍💻... Thanks. :heart::heart::heart:

How can you embed a simple CODE EDITOR.

Simple but Powerful Editor - Codemirror

Example

Example Explained