in

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 –

**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



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>
Enter fullscreen mode

Exit fullscreen mode

Then Create a dummy text box for your Editor

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

Exit fullscreen mode

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

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

Exit fullscreen mode

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. ❤️❤️❤️



Source: https://dev.to/ksengine/how-can-you-embed-a-simple-code-editor-1kni

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

A compilation of important Data Structures and Algorithms based on Python

VIM – Beginners Guide