Vue-CodeMirror 使用

news2024/9/22 3:51:46

安装

 npm install vue-codemirror -S # or yarn add vue-codemirror -S

全局配置，main.js文件引入

import VueCodemirror from 'vue-codemirror'
// import base style
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)

Vue 文件内使用
<template>
  <div class="exercise">
    <codemirror 
      v-model="codeSnippets"
	  :options="cmOptions"
    />
  </div>
</template>
<script>
// 编辑器代码格式
import 'codemirror/mode/properties/properties.js'
// 自动刷新(防止codemirror需要手动刷新才出数据)
import 'codemirror/addon/display/autorefresh'
// 主题
import 'codemirror/theme/ayu-mirage.css'

export default {
  data(){
    return{
	  codeSnippets: 'aa',
	  cmOptions: {
	    autorefresh: true,
		tabSize: 4,
		mode: 'text/x-properties',
		theme: 'ayu-mirage',
		line: true,
		viewportMargin: Infinity, //处理高度自适应时搭配使用
		highlightDifferences: true,
		autofocus: false,
		indentUnit: 2,
		smartIndent: true,
		readOnly: true, // 只读
		showCursorWhenSelecting: true,
		firstLineNumber: 1
	  }
	}
  }
}

</script>

<style lang="scss">
.CodeMirror{
  font-family: monospace;
  height: 100vh;
  color: black;
  direction: ltr;
}
</style>

mode 和 theme 可以在官网上查找切换 mode查看官方支持，在项目node_modules/codemirror/mode目录下找相应js文件引入即可； theme同理。

theme 地址：https://codemirror.net/demo/theme.html

mode地址：https://codemirror.net/mode/ codemirror

在 v-for 使用多个时，会出现数据需要鼠标点击一下才会刷新的情况，此时需要引入自动刷新机制，在使用界面引入 autorefresh 并在 options 中配置

// 自动刷新
import 'codemirror/addon/display/autorefresh'

export default {
  data(){
    return{
	  cmOptions: {
	  	// 开启自动刷新
	    autorefresh: true
	  	...

安装

npm install codemirror-editor-vue3 -S

# or

yarn add codemirror-editor-vue3 -S

全局配置，main.js文件引入
import { createApp } from 'vue';
import App from './App.vue';
import Codemirror from "codemirror-editor-vue3";

const app = createApp(App);
app.use(Codemirror).mount('#app');

Vue 文件内使用
<template>
  <div class="exercise">
    <codemirror v-model:value="codeSnippets" :options="cmOptions" />
  </div>
</template>

<script>
// 编辑器代码格式
import "codemirror/mode/javascript/javascript.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";
// 主题
import "codemirror/theme/ayu-mirage.css";
import { reactive, ref } from "vue";

export default {
  setup() {
    const codeSnippets = ref(`var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
}`);
    const cmOptions = reactive({
      autorefresh: true,
      tabSize: 4,
      mode: "text/javascript",
      theme: "ayu-mirage",
      line: true,
      viewportMargin: Infinity, //处理高度自适应时搭配使用
      highlightDifferences: true,
      autofocus: false,
      indentUnit: 2,
      smartIndent: true,
      // readOnly: true, // 只读
      showCursorWhenSelecting: true,
      firstLineNumber: 1,
    });

    return { codeSnippets, cmOptions };
  },
};
</script>

<style lang="scss">
.CodeMirror {
  height: 100vh;
  direction: ltr;
}
</style>

效果如下

merge 模式

<template>
  <div class="exercise">
    <codemirror
      :merge="true"
      @change="onChange"
      class="cm-component"
      :options="cmOptions"
    />
  </div>
</template>

<script>
// 编辑器代码格式
import "codemirror/mode/htmlmixed/htmlmixed.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";

import { reactive, ref } from "vue";

export default {
  setup() {
    const code = ref(`<head>
  <title>codemirror-editor-vue</title>
  <meta data-n-head="ssr" charset="utf-8">
</head>`);
    const orig2 = ref(`<head>
  <title>test title</title>
  <meta data-n-head="ssr" charset="utf-8">
</head>`);
    const onChange = (val, instance) => {
      console.log(val);
      console.log(instance);
    };
    const cmOptions = reactive({
      autorefresh: true,
      mode: "text/javascript",
      theme: "default",
      value: code.value,
      origLeft: null,
      orig: orig2,
      connect: "align",
      mode: "text/html",
      lineNumbers: true,
      collapseIdentical: false,
      highlightDifferences: true,
    });

    return { onChange, orig2, code, cmOptions };
  },
};
</script>

<style lang="scss">
.CodeMirror-merge {
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}
</style>

效果如下