vue代码编辑器vue-codemirror的简单使用更改样式和切换主题等

怼烎@ 2023-10-04 21:16 90阅读 0赞

可以查看官网演示：[vue-codemirror | Homepage][vue-codemirror _ Homepage]

支持的语言mode：[CodeMirror: Language Modes][CodeMirror_ Language Modes]

支持的主题样式：[CodeMirror: Theme Demo][CodeMirror_ Theme Demo]

开始安装和使用：

npm i codemirror@5 -S
    npm i vue-codemirror@4.0.6 -S

#### 基础使用 ####

注册全局组件

// 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>
      <div class="codeBox">
        <codemirror
          v-model="code"
          :options="cmOptions"
        ></codemirror>
      </div>
    </template>
    
    <script>
    // 引入语言
    import 'codemirror/mode/javascript/javascript.js'
    // 引入样式
    import 'codemirror/theme/base16-dark.css'
    // 按需导入codemirror其他功能
    import 'codemirror/xxx'
    
    export default {
      data () {
        return {
          code: 'const a = 10',
          cmOptions: {
            // codemirror options
            tabSize: 4,
            mode: 'text/javascript',
            theme: 'base16-dark',
            lineNumbers: true,
            line: true,
            // more codemirror options, 更多 codemirror 的高级配置...
          }
        }
      },
      methods: {
      },
      computed: {
        codemirror() {
          return this.$refs.myCm.codemirror
        }
      },
      mounted() {
      }
    }
    </script>

实现的效果：

![d4a8edee321547298de808b05073eb37.png][]

编辑器默认高度是300px，如果想更改高度和字体大小：添加样式

更改主题的时候，需要先引入相应的主题样式:

![803cb023e19d423a86613757257de724.png][]

然后再更改主题：

![d0bae7bc0e2e45909fff985bf263b59b.png][]

实际效果：![cdeccf64f81f41dc80e31c452839253d.png][]

如果想更改语言和样式，需要单独导入指定的语言和样式文件，比如python：

import 'codemirror/mode/python/python.js'

想看它支持那些语言样式或者怎么导入，可以看一下mode下面有哪些：

![43e0de63f3a24d658d6b3c474f3dceed.png][]

还有哪些主题，也得引入对应的主题：

import 'codemirror/theme/abbott.css'

![0059a849d40f4235bb831c8435ed7d83.png][]

[vue-codemirror _ Homepage]: https://github.surmon.me/vue-codemirror
[CodeMirror_ Language Modes]: https://codemirror.net/5/mode/
[CodeMirror_ Theme Demo]: https://codemirror.net/5/demo/theme.html#bespin
[d4a8edee321547298de808b05073eb37.png]: https://img-blog.csdnimg.cn/d4a8edee321547298de808b05073eb37.png
[803cb023e19d423a86613757257de724.png]: https://img-blog.csdnimg.cn/803cb023e19d423a86613757257de724.png
[d0bae7bc0e2e45909fff985bf263b59b.png]: https://img-blog.csdnimg.cn/d0bae7bc0e2e45909fff985bf263b59b.png
[cdeccf64f81f41dc80e31c452839253d.png]: https://img-blog.csdnimg.cn/cdeccf64f81f41dc80e31c452839253d.png
[43e0de63f3a24d658d6b3c474f3dceed.png]: https://img-blog.csdnimg.cn/43e0de63f3a24d658d6b3c474f3dceed.png
[0059a849d40f4235bb831c8435ed7d83.png]: https://img-blog.csdnimg.cn/0059a849d40f4235bb831c8435ed7d83.png