vue-codemirror 基于 Codemirror，适用于 Vue 的 Web 代码编辑器。

小咪咪 2023-06-16 15:52 25阅读 0赞

Codemirror官网：[https://codemirror.net/][https_codemirror.net]

vue-codemirror官网：[https://www.npmjs.com/package/vue-codemirror][https_www.npmjs.com_package_vue-codemirror]

第一步安装：npm install vue-codemirror --save

第二步引入：分为全局引入和组件引入

全局引入：

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

组件引入：

// require component
    import { codemirror } from 'vue-codemirror'
     
    // require styles
    import 'codemirror/lib/codemirror.css'
     
    // require more codemirror resource...
     
    // component
    export default {
      components: {
        codemirror
      }
    }

案例：

<template>
      <codemirror v-model="code" :options="cmOptions"></codemirror>
    </template>
    
    <script>
    import { codemirror } from 'vue-codemirror'
    import 'codemirror/lib/codemirror.css'
    // language js
    import 'codemirror/mode/javascript/javascript.js'
    // theme css
    import 'codemirror/theme/base16-dark.css'
    // more codemirror resources
    // import 'codemirror/some-resource...'
    export default {
      components: {
        codemirror
      },
      data(){
        return {
          code: 'const a = 10',
          cmOptions: {
            // codemirror options
            tabSize: 4,
            mode: 'text/javascript',
            theme: 'base16-light',
            lineNumbers: true,
            line: true,
          }
        }
      },
    }
    </script>

[https_codemirror.net]: https://codemirror.net/
[https_www.npmjs.com_package_vue-codemirror]: https://www.npmjs.com/package/vue-codemirror