vue中如何使用codemirror实现在线编辑及预览代码

手把手教你本地搭建环境并运行项目：vue中使用codemirror实现在线编辑及预览代码。有兴趣的可以借鉴一下！

• 具体主题等配置详见codemirror官网
• npm install vue-codemirror
• 具备在线编辑、语法高亮、搜索、代码块折叠、只读预览、格式化代码、撤销、重置、重做、复制等功能。

<template>
<q-dialog
v-model="codeVisible"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card>
<q-card-section class="q-pa-none">
<q-bar class="bg-primary">
<q-btn
dense
flat
icon="restore"
size="md"
class="text-white"
@click="resetCode"
>
<q-tooltip>重置</q-tooltip>
</q-btn>
<q-btn
dense
flat
icon="undo"
size="md"
class="text-white"
@click="undoCode"
>
<q-tooltip>撤销</q-tooltip>
</q-btn>
<q-btn
dense
flat
icon="redo"
size="md"
class="text-white"
@click="redoCode"
>
<q-tooltip>重做</q-tooltip>
</q-btn>
<q-btn
dense
flat
icon="search"
size="md"
class="text-white"
@click="searchCode"
>
<q-tooltip>搜索</q-tooltip>
</q-btn>
<q-btn
dense
flat
icon="code"
size="md"
class="text-white"
@click="formatCode"
>
<q-tooltip>格式化代码</q-tooltip>
</q-btn>
<q-btn
id="copyCode"
dense
flat
icon="copy_all"
size="md"
class="text-white"
:data-clipboard-text="code"
@click="copyCode"
>
<q-tooltip>全部复制</q-tooltip>
</q-btn>
<q-space />
<q-btn
v-close-popup
dense
flat
icon="close"
size="md"
class="text-white"
@click="saveCode"
>
<q-tooltip>保存且关闭</q-tooltip>
</q-btn>
</q-bar>
</q-card-section>
<q-card-section class="q-pa-none dialog-codeMirror">
<codemirror
ref="codemirror"
v-model="code"
:options="codemirrorOptions"
@copy="copyCode"
></codemirror>
</q-card-section>
</q-card>
</q-dialog>
</template>

<script>
import { codemirror } from "vue-codemirror";
import ClipboardJS from "clipboard";
// eslint-disable-next-line camelcase
import { js_beautify } from "js-beautify";
import "codemirror/lib/codemirror.css";
import "codemirror/keymap/sublime";
import "codemirror/theme/eclipse.css";
import "codemirror/mode/javascript/javascript.js";

import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/selection/active-line";
import "codemirror/addon/scroll/annotatescrollbar.js";

import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/lint/javascript-lint.js";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
// 搜索
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";

// 折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/comment-fold";

export default {
name: "CodeEditor",
components: {
codemirror,
},
props: {
value: {
type: String,
default: null,
},
},
data() {
return {
code: this.value,
codeVisible: false,
codemirrorOptions: {
tabSize: 2, // tab的空格个数,默认为4
theme: "eclipse", // 主题样式
lineNumbers: true, // 是否显示行数
lineWrapping: true, // 是否自动换行
styleActiveLine: true, // line选择是是否加亮
matchBrackets: true, // 括号匹配
mode: "javascript", // 实现javascript代码高亮
readOnly: false, // 是否只读
foldGutter: true,
lint: true,
gutters: [
"CodeMirror-linenumbers",
"CodeMirror-foldgutter",
"CodeMirror-lint-markers",
],
},
};
},
methods: {
resetCode() {
this.$refs.codemirror.codemirror.setValue(this.value);
},
undoCode() {
this.$refs.codemirror.codemirror.execCommand("undo");
},
redoCode() {
this.$refs.codemirror.codemirror.execCommand("redo");
},
searchCode() {
this.$refs.codemirror.codemirror.execCommand("find");
},
formatCode() {
const code = this.$refs.codemirror.codemirror.getValue();
this.$refs.codemirror.codemirror.setValue(js_beautify(code));
},
copyCode() {
const clipboard = new ClipboardJS("#copyCode");
clipboard.on("success", (e) => {
this.$q.notify({
caption: "代码已复制到剪切板，可粘贴",
message: "操作成功",
type: "positive",
});
clipboard.destroy();
});
clipboard.on("error", (e) => {
this.$q.notify({
message: "代码复制失败",
type: "negative",
});
clipboard.destroy();
});
},
saveCode() {
this.$emit("input", this.code);
},
},
};
</script>

<style scoped></style>