Codemirror with Vue 2: Addons

Dinkar Sharma — Sun, 13 Aug 2023 16:21:00 +0000

In the world of web development, integrating powerful tools into your projects can greatly enhance the user experience and streamline your workflow. If you're currently utilizing a fundamental CodeMirror setup within the Vue 2 framework (if you haven't, you can find a guide on setting up CodeMirror with Vue 2 here), you might have encountered a common predicament. Unlike the conventional code editors you're accustomed to, the integrated code editor might not be exhibiting the anticipated behavior. This discrepancy can lead to frustration, but fear not, as this post will delve into the intricacies of this issue and provide insights on how to overcome it.

Following are some of the functionalities that you should really add to your code editor:

Auto Close Brackets:

Brackets should be automatically closed while typing. This can be done as following:

First import closebrackets addon, like this: import 'codemirror/addon/edit/closebrackets.js'
Then add autoCloseBrackets inside configuration options like this:

 Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
        })

That's it now autoCloseBrackets functionality is enabled in your code editor

Match Tags and Auto Close Tags:

If you are enabling a language which includes tags like HTML then these are useful.

First import them from addons folder:
import 'codemirror/addon/edit/matchtags.js'
import 'codemirror/addon/edit/closetag.js'
Then add them to configuration options:

Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
            matchTags: true,
            autoCloseTags: true,
        })

Similarly you can add many more addons. Now that you know how you can include addons to your code editor, you should go through this part of the documentation: Link, here all the other addons are given with there details.

Codemirror with Vue 2 : Setup

Dinkar Sharma — Fri, 11 Aug 2023 17:29:56 +0000

Codemirror 6+ is not compatible with vue 2.7 and below, so we'll be using Codemirror 5 which is quite easy to setup with Vue 2

First we'll install codemirror 5 using npm or yarn like this:

npm install codemirror@5.65

yarn add codemirror@5.65

Then we'll create a new file (lets say, CodeEditor.vue)
Then inside template we'll add textarea tag with id and v-model... Something like this:

<template>
  <textarea v-model="code" id="codeEditor"></textarea>
</template>

<script>
export default {
   data(){
     return {
        code:'console.log("hello world")',
     }
   }
}
</script>

Then we'll import codemirror into the file and update the textarea to codemirror... also don't forget to import css file from codemirror as it is required
Also import a mode (like here we are importing javascript) as it will be responsible for language styling according to the type of language
(I have also added how you should add mode in configuration options further down)

<script>
import * as Codemirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'

export default {
   data(){
     return {
        code:'console.log("hello world")',
     }
   },
   mounted(){
      Codemirror.fromTextArea(document.getElementById('codeEditor'), {

            lineNumbers: true,
            line: true,
            tabSize: 4,
            mode: 'text/javascript',

        })
   }
}

That's it you have successfully integrated Codemirror to Vue 2

Now let's add some basic customizations

Let's first add a theme for the codeEditor
For dracula 🧛🏻 theme, import this theme using following import statement:

import 'codemirror/theme/dracula.css'

Then add theme in configuration options like this:

      Codemirror.fromTextArea(document.getElementById('codeEditor'), {

            lineNumbers: true,
            line: true,
            tabSize: 4,
            mode: 'text/javascript',
            theme: 'dracula',

        })
   }

There are many themes that you can choose from... I'll recommend you to go to node_modules > codemirror > theme folder here you'll find all the themes that you can apply.

Now lets find out how to add correct mode value in configuration options

You should go to node_modules > codemirror > mode folder, here you'll find all the languages that can be added.
You should know that for C, C++, Java and few more languages you need to import clike... like this:
import 'codemirror/mode/clike/clike.js'
But the way these modes are added to configuration options are different.

For example if you want to add C to your codemirror then you'll need to add this to your configuration options:

Codemirror.fromTextArea(document.getElementById('codeEditor'), {

            lineNumbers: true,
            line: true,
            tabSize: 4,
            mode: 'text/x-csrc',
            theme: 'dracula',

        })

Now let's see how you'll know which is the right value for mode:

First open this link on new tab: link to Codemirror 5
Here you'll find all the different languages supported by codemirror 5
Find your language, in our case click on ' C, C++, C# '
Here you'll find the mode value you need to use at bottom of the page

There are still many more customizations that you can do, like adding 'autoCloseBrackets' functionality to your codemirror.

For that I'll add another post and add its link: here

DEV Community: Dinkar Sharma