Vue中使用vue-codemirror插件实现代码在线编辑

心已赠人 2023-09-30 13:16 2阅读 0赞

## 场景 ##

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_霸道流氓气质的博客-CSDN博客\_若依前后端分离][-CSDN]

在上面的基础上，怎样实现代码在线编辑功能。

![9207520341db996794aee8ad65f3ea77.gif][]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、插件地址

[GitHub - surmon-china/vue-codemirror: ⌨️ @codemirror component for @vuejs][GitHub - surmon-china_vue-codemirror_ _ _codemirror component for _vuejs]

在线演示地址

[vue-codemirror | Homepage][vue-codemirror _ Homepage]

![49db1c490829366801f816e2df59672f.png][]

2、安装插件

npm install vue-codemirror --save

![3e958b17a950041b8ed0b39561d4cd8f.png][]

3、全局挂载插件方式或者局部页面加载方式

全局挂载

import Vue from 'vue'
    import VueCodemirror from 'vue-codemirror'
    
    // import base style
    import 'codemirror/lib/codemirror.css'
    
    // import more codemirror resource...
    
    // you can set default global options and events when Vue.use
    Vue.use(VueCodemirror, /* {
      options: { theme: 'base16-dark', ... },
      events: ['scroll', ...]
    } */)

局部页面引用

import { codemirror } from 'vue-codemirror'
    
    // import base style
    import 'codemirror/lib/codemirror.css'
    
    // import more codemirror resource...
    
    export default {
      components: {
        codemirror
      }
    }

4、新建Vue页面代码修改如下

<template>
      
      
      
      <codemirror
        ref="cmEditor"
        :value="code"
        :options="cmOptions"
        @ready="onCmReady"
        @focus="onCmFocus"
        @input="onCmCodeChange"
      />
    </template>
    
    <script>
    
    import { codemirror } from 'vue-codemirror'
    // import base style
    import 'codemirror/lib/codemirror.css'
    // import language js
    import 'codemirror/mode/javascript/javascript.js'
    // import theme style
    import 'codemirror/theme/base16-dark.css'
    // import more 'codemirror/some-resource...'
    export default {
        name: "codemirrorDemo",
        components: {
        codemirror
      },
      data () {
        return {
          code: 'const a = 10',
          cmOptions: {
            tabSize: 4,
            mode: 'text/javascript',
            theme: 'base16-dark',
            lineNumbers: true,
            line: true,
            // more CodeMirror options...
          }
        }
      },
      methods: {
        onCmReady(cm) {
          console.log('the editor is readied!', cm)
        },
        onCmFocus(cm) {
          console.log('the editor is focused!', cm)
        },
        onCmCodeChange(newCode) {
          console.log('this is new code', newCode)
          this.code = newCode
        }
      },
      computed: {
        codemirror() {
          return this.$refs.cmEditor.codemirror
        }
      },
      mounted() {
        console.log('the current CodeMirror instance object:', this.codemirror)
        // you can use this.codemirror to do something...
      }
    }
    </script>

5、其他设置参考官方说明

![d7708bf74c418c5f699ac9b127fe3ca0.png][]

[-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[9207520341db996794aee8ad65f3ea77.gif]: https://img-blog.csdnimg.cn/img_convert/9207520341db996794aee8ad65f3ea77.gif
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[GitHub - surmon-china_vue-codemirror_ _ _codemirror component for _vuejs]: https://github.com/surmon-china/vue-codemirror
[vue-codemirror _ Homepage]: https://github.surmon.me/vue-codemirror
[49db1c490829366801f816e2df59672f.png]: https://img-blog.csdnimg.cn/img_convert/49db1c490829366801f816e2df59672f.png
[3e958b17a950041b8ed0b39561d4cd8f.png]: https://img-blog.csdnimg.cn/img_convert/3e958b17a950041b8ed0b39561d4cd8f.png
[d7708bf74c418c5f699ac9b127fe3ca0.png]: https://img-blog.csdnimg.cn/img_convert/d7708bf74c418c5f699ac9b127fe3ca0.png