vue-codemirror 代码编辑器

最新推荐文章于 2023-04-04 17:21:52 发布

原创最新推荐文章于 2023-04-04 17:21:52 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#python #vue #java #linux #js

本文介绍如何在Vue项目中安装并使用Vue-Codemirror组件，实现代码编辑与高亮功能。文中提供了详细的安装步骤及配置选项，并通过示例展示了如何将其作为全局或局部组件进行注册。

原文链接: vue-codemirror 代码编辑器

上一篇: vue 中使用highlight.js 高亮代码块，代码实时高亮

下一篇: 使用手机陀螺仪完成一个简单的小游戏

文档

https://github.com/surmon-china/vue-codemirror

http://codemirror.net/

https://surmon-china.github.io/vue-codemirror/

安装

npm install vue-codemirror --save

可全局或者局部注册

mount with global

// 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', ...]
} */)

mount with component

// require component
import { codemirror } from 'vue-codemirror'

// require styles
import 'codemirror/lib/codemirror.css'

// require more codemirror resource...

// component
export default {
  components: {
    codemirror
  }
}

简单使用，配置信息参考案例，一般也不用太多配置。。。

主题的配置需要引入主题css文件，然后在设置主题，没有特别好看的。。。

<template>
  <div>
    <codemirror
      style="width: 400px;height: 300px"
      v-model="code"
      :options="cmOptions">
    </codemirror>
  </div>
</template>

<script>
  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/theme/material.css'
  import {codemirror} from 'vue-codemirror'
  import 'codemirror/lib/codemirror.css'

  export default {
    components: {
      codemirror
    },

    data() {
      return {
        code: `var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})`,
        cmOptions: {
          tabSize: 4,
          mode: 'text/javascript',
          theme: 'material',
          lineNumbers: true,
          line: true,
        }
      }
    },

  }
</script>