Vue（27）vue-codemirror实现在线代码编译器

前言

如果我们想在Web端实现在线代码编译的效果，那么需要使用组件vue-codemirror，他是将CodeMirror进行了再次封装

• 支持代码高亮
• 62种主题颜色，例如monokai等等
• 支持json, sql, javascript，css，xml, html，yaml, markdown, python编辑模式，默认为 json
• 支持快速搜索
• 支持自动补全提示
• 支持自动匹配括号

环境准备

npm install jshint
npm install jsonlint
npm install script-loader
npm install vue-codemirror


封装组件

我们可以在项目中的components中将vue-codemirror进行再次封装

<template>
<codemirror
ref="myCm"
v-model="editorValue"
:options="cmOptions"
@changes="onCmCodeChanges"
@blur="onCmBlur"
@keydown.native="onKeyDown"
@mousedown.native="onMouseDown"
@paste.native="OnPaste"
>
</codemirror>
</template><script>
import { codemirror } from "vue-codemirror";
import 'codemirror/keymap/sublime'
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/yaml/yaml.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/python/python.js";
import "codemirror/mode/markdown/markdown.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/hint/xml-hint.js";
import "codemirror/addon/hint/css-hint.js";
import "codemirror/addon/hint/html-hint.js";
import "codemirror/addon/hint/sql-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint.js";
import "codemirror/addon/lint/json-lint";
import 'codemirror/addon/selection/active-line'
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
require("script-loader!jsonlint");
import "codemirror/addon/lint/javascript-lint.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/edit/closebrackets.js";
import "codemirror/addon/edit/closetag.js";
import "codemirror/addon/edit/matchtags.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/selection/active-line.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/addon/display/autorefresh.js";
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/match-highlighter.js";
export default {
name: "index",
components: {codemirror},
props: ["cmTheme", "cmMode", "cmIndentUnit", "autoFormatJson"],
data() {
return {
editorValue: '{}',
cmOptions: {
theme: !this.cmTheme || this.cmTheme === "default" ? "default" : this.cmTheme, // 主题
mode: !this.cmMode || this.cmMode === "default" ? "application/json" : this.cmMode, // 代码格式
tabSize: 4, // tab的空格个数
indentUnit: !this.cmIndentUnit ? 2 : this.cmIndentUnit, // 一个块（编辑语言中的含义）应缩进多少个空格
autocorrect: true, // 自动更正
spellcheck: true, // 拼写检查
lint: true, // 检查格式
lineNumbers: true, //是否显示行数
lineWrapping: true, //是否自动换行
styleActiveLine: true, //line选择是是否高亮
keyMap: 'sublime', // sublime编辑器效果
matchBrackets: true, //括号匹配
autoCloseBrackets: true, // 在键入时将自动关闭括号和引号
matchTags: { bothTags: true }, // 将突出显示光标周围的标签
foldGutter: true, // 可将对象折叠，与下面的gutters一起使用
gutters: [
"CodeMirror-lint-markers",
"CodeMirror-linenumbers",
"CodeMirror-foldgutter"
],
highlightSelectionMatches: {
minChars: 2,
style: "matchhighlight",
showToken: true
},
},
enableAutoFormatJson: this.autoFormatJson == null ? true : this.autoFormatJson, // json编辑模式下，输入框失去焦点时是否自动格式化，true 开启， false 关闭
}
},
created() {
try {
if (!this.editorValue) {
this.cmOptions.lint = false;
return;
}
if (this.cmOptions.mode === "application/json") {
if (!this.enableAutoFormatJson) {
return;
}
this.editorValue = this.formatStrInJson(this.editorValue);
}
} catch (e) {
console.log("初始化codemirror出错：" + e);
}
},
methods: {
resetLint() {
if (!this.$refs.myCm.codemirror.getValue()) {
this.$nextTick(() => {
this.$refs.myCm.codemirror.setOption("lint", false);
});
return;
}
this.$refs.myCm.codemirror.setOption("lint", false);
this.$nextTick(() => {
this.$refs.myCm.codemirror.setOption("lint", true);
});
},
// 格式化字符串为json格式字符串
formatStrInJson(strValue) {
return JSON.stringify(
JSON.parse(strValue),
null,
this.cmIndentUnit
);
},
onCmCodeChanges(cm, changes) {
this.editorValue = cm.getValue();
this.resetLint();
},
// 失去焦点时处理函数
onCmBlur(cm, event) {
try {
let editorValue = cm.getValue();
if (this.cmOptions.mode === "application/json" && editorValue) {
if (!this.enableAutoFormatJson) {
return;
}
this.editorValue = this.formatStrInJson(editorValue);
}
} catch (e) {
// 啥也不做
}
},
// 按下键盘事件处理函数
onKeyDown(event) {
const keyCode = event.keyCode || event.which || event.charCode;
const keyCombination =
event.ctrlKey || event.altKey || event.metaKey;
if (!keyCombination && keyCode > 64 && keyCode < 123) {
this.$refs.myCm.codemirror.showHint({ completeSingle: false });
}
},
// 按下鼠标时事件处理函数
onMouseDown(event) {
this.$refs.myCm.codemirror.closeHint();
},
// 黏贴事件处理函数
OnPaste(event) {
if (this.cmOptions.mode === "application/json") {
try {
this.editorValue = this.formatStrInJson(this.editorValue);
} catch (e) {
// 啥都不做
}
}
},
}
}
</script><style scoped></style>

此组件默认配置了json编译器，cmOptions中是代码编译器的配置项，需要额外的功能也可以去看官方文档配置

接下来看展示效果



可以看到我们输入了json格式的字符串，即使格式不正确，会给我们错误提示，并且也会给我们自动格式化

python编译器

我们封装的组件默认是json编译器，如果我们想使用其他语言，也很简单，只需要导入其他语言的mode

<template>
<div>
<el-button type="primary" icon="el-icon-circle-check-outline" @click="handleConfirm" round>
点击保存
</el-button>
<el-button icon="el-icon-caret-right" type="info" @click="handleRunCode" round>
在线运行
</el-button>
<code-editor
:cmTheme="cmTheme"
:cmMode="cmMode"
>
</code-editor>
</div>
</template><script>
import codeEditor from '@/components/CodeEditor/index'
import 'codemirror/theme/monokai.css' // 导入monokai主题
import 'codemirror/mode/python/python.js' // 导入python
export default {
name: "index",
components: {
codeEditor
},
data() {
return {
cmTheme: "monokai",
cmMode: "python",
}
},
methods: {
handleConfirm() {},
handleRunCode() {}
}
}
</script><style>
.CodeMirror {
position: relative;
height: 100vh;
overflow: hidden;
margin-top: 10px;
}
</style>
<style lang="scss" scoped>
</style>


效果如下