Vue-CodeMirror 使用-编程知识

Vue-CodeMirror 使用

安装

 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>

效果如下