vue使用codemirror

vue项目有不同的依赖可以对应2和3版本的codemirror

vue-codemirror

在vue2上我们可以使用 vue-codemirror

1. 安装

npm install vue-codemirror -S

2. 引入

import Vue from 'vue'
import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

Vue.use(CodeMirror)

3. 使用

<template>
	<codemirror :code.sync="code" :options="editorOption"></codemirror>
</template>

<script type="text/javascript">
export default {
    
    
	data () {
    
    
	  return {
    
    
	  	code: '',
	    editorOption: {
    
    
	      tabSize: 2,
	      mode: 'application/json',
	      theme: 'base16-dark',
	      lineNumbers: true, 
	      line: true
	    }
	  }
	}
}
<script>

codemirror-editor-vue3

我们在vue3上使用 codemirror-editor-vue3

1. 安装

npm install codemirror-editor-vue3 -S

2. 引入

import {
    
     createApp } from "vue";
import App from "./App.vue";
import {
    
     GlobalCmComponent } from "codemirror-editor-vue3";

const app = createApp(App);
app.use(GlobalCmComponent);
app.mount("#app");

3. 使用

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="test placeholder"
    :height="200"
    @change="change"
  />
</template>

<script>
import Codemirror from "codemirror-editor-vue3";

// language
import "codemirror/mode/javascript/javascript.js";

// theme
import "codemirror/theme/dracula.css";

import {
    
     ref } from "vue";
export default {
    
    
  components: {
    
     Codemirror },
  setup() {
    
    
    const code = ref(`
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
}`);

    return {
    
    
      code,
      cmOptions: {
    
    
        mode: "text/javascript", // Language mode
        theme: "dracula", // Theme
        lineNumbers: true, // Show line number
        smartIndent: true, // Smart indent
        indentUnit: 2, // The smart indent unit is 2 spaces in length
        foldGutter: true, // Code folding
        styleActiveLine: true, // Display the style of the selected row
      },
    };
  },
};
</script>