vue2
安装
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
...vue3
安装
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>效果如下
