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.
Kavindu …


This content originally appeared on DEV Community and was authored by Kavindu Santhusa

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

Embed VSCode single file editor in your website.

Kavindu Santhusa ・ Oct 2 ・ 2 min read

#javascript #webdev #beginners #vscode
**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.

Codemirror Logo

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>

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


This content originally appeared on DEV Community and was authored by Kavindu Santhusa


Print Share Comment Cite Upload Translate Updates
APA

Kavindu Santhusa | Sciencx (2021-10-03T11:25:57+00:00) How can you embed a simple CODE EDITOR.. Retrieved from https://www.scien.cx/2021/10/03/how-can-you-embed-a-simple-code-editor/

MLA
" » How can you embed a simple CODE EDITOR.." Kavindu Santhusa | Sciencx - Sunday October 3, 2021, https://www.scien.cx/2021/10/03/how-can-you-embed-a-simple-code-editor/
HARVARD
Kavindu Santhusa | Sciencx Sunday October 3, 2021 » How can you embed a simple CODE EDITOR.., viewed ,<https://www.scien.cx/2021/10/03/how-can-you-embed-a-simple-code-editor/>
VANCOUVER
Kavindu Santhusa | Sciencx - » How can you embed a simple CODE EDITOR.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/03/how-can-you-embed-a-simple-code-editor/
CHICAGO
" » How can you embed a simple CODE EDITOR.." Kavindu Santhusa | Sciencx - Accessed . https://www.scien.cx/2021/10/03/how-can-you-embed-a-simple-code-editor/
IEEE
" » How can you embed a simple CODE EDITOR.." Kavindu Santhusa | Sciencx [Online]. Available: https://www.scien.cx/2021/10/03/how-can-you-embed-a-simple-code-editor/. [Accessed: ]
rf:citation
» How can you embed a simple CODE EDITOR. | Kavindu Santhusa | Sciencx | https://www.scien.cx/2021/10/03/how-can-you-embed-a-simple-code-editor/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts