vue 使用 vue-codemirror 的编辑器组件
依赖：
npm install jsonlint
npm install jshint
npm install script-loader
npm install vue-codemirror
npm install element-ui
编辑器组件封装代码
<template>
<div class="code-mirror-div">
<div class="tool-bar" ref="toolBar" v-if="showTool">
<slot name="tool_before"/>
<el-select v-model="cmOptions.theme" placeholder="请选择" size="mini" style="width:150px">
<el-option v-for="item in cmThemeOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
<slot name="tool_after"/>
</div>
<div :style="{ height:codeMirrorHeight }">
<codemirror
ref="myCm"
:value="editorValue"
:options="{...cmOptions,...userOption}"
@input="$emit('input',$event)"
@changes="onCmCodeChanges"
@blur="onCmBlur"
@keydown.native="onKeyDown"
@mousedown.native="onMouseDown"
@paste.native="OnPaste"
></codemirror>
</div>
</div>
</template>
<script>
import { codemirror } from "vue-codemirror";
import "./codemirror.js"
export default {
name: "CodeEditor",
components: {
codemirror,
},
model: {
prop: 'code',
event: 'input'
},
data() {
return {
codeMirrorHeight:'100%',
editorValue: this.code,
userOption:{},
cmThemeOptions: [
"default",
"3024-day",
"3024-night",
"abcdef",
"ambiance",
"ayu-dark",
"ayu-mirage",
"base16-dark",
"base16-light",
"bespin",
"blackboard",
"cobalt",
"colorforth",
"darcula",
"dracula",
"duotone-dark",
"duotone-light",
"eclipse",
"elegant",
"erlang-dark",
"gruvbox-dark",
"hopscotch",
"icecoder",
"idea",
"isotope",
"lesser-dark",
"liquibyte",
"lucario",
"material",
"material-darker",
"material-palenight",
"material-ocean",
"mbo",
"mdn-like",
"midnight",
"monokai",
"moxer",
"neat",
"neo",
"night",
"nord",
"oceanic-next",
"panda-syntax",
"paraiso-dark",
"paraiso-light",
"pastel-on-dark",
"railscasts",
"rubyblue",
"seti",
"shadowfox",
"solarized dark",
"solarized light",
"the-matrix",
"tomorrow-night-bright",
"tomorrow-night-eighties",
"ttcn",
"twilight",
"vibrant-ink",
"xq-dark",
"xq-light",
"yeti",
"yonce",
"zenburn"
],
cmEditorModeOptions: [
"default",
"json",
"sql",
"javascript",
"xml",
"html",
"yaml",
"markdown",
"python"
],
cmOptions: {
theme: 'idea',
mode: 'application/json',
lineWrapping: true,
lineNumbers: true,
autofocus: true,
smartIndent: false,
autocorrect: true,
spellcheck: true,
hintOptions: this.cmHintOptions||{},
extraKeys: {
"Alt-Q": "autocomplete",
"Ctrl-Alt-L": () => {
try {
if (
this.cmOptions.mode == "application/json" &&
this.editorValue
) {
this.editorValue = this.formatStrInJson(
this.editorValue
);
}
} catch (e) {
this.$message.error(
"格式化代码出错：" + e.toString()
);
}
}
},
lint: true,
gutters: [
"CodeMirror-lint-markers",
"CodeMirror-linenumbers",
"CodeMirror-foldgutter"
],
foldGutter: true,
autoCloseBrackets: true,
autoCloseTags: true,
matchTags: { bothTags: true },
matchBrackets: true,
styleActiveLine: true,
autoRefresh: true,
highlightSelectionMatches: {
minChars: 2,
style: "matchhighlight",
showToken: true
},
styleSelectedText: true,
enableAutoFormatJson: true,
defaultJsonIndentation: 2
},
enableAutoFormatJson: true,
defaultJsonIndentation: 2
}
},
props: {
cmHintOptions: {
type: Object,
default() {
return {}
}
},
code: {
type: String,
default: ''
},
options: {
type: Object,
default() {
return {}
}
},
showTool: {
type: Boolean,
default: false
}
},
computed: {
myCodemirror () {
return this.$refs.mirror.codemirror
},
inCode: {
get() {
return this.code
},
set() {}
},
},
watch: {
'cmOptions.theme': function(newValue, oldValue) {
try {
let theme =
this.cmOptions.theme == "default" ? "blackboard" : newValue;
require("codemirror/theme/" + theme + ".css");
this.cmOptions.theme = theme;
this.resetLint();
} catch (e) {
this.$message.error("切换编辑器主题出错：" + e.toString());
}
},
options: {
handler(n,o) {
if(Object.keys(n).length) {
this.userOption = JSON.parse(JSON.stringify(n))
if(this.userOption.mode) this.userOption.mode = this.onEditorModeChange(this.userOption.mode)
}
},
deep: true,
immediate: true
},
code(n,o) {
if(n!=this.editorValue) {
try {
this.editorValue = this.formatStrInJson(n)
} catch (error) {
this.editorValue = n
// 啥也不做
}
}
}
},
mounted() {
this.codeMirrorHeight = this.showTool?`calc( 100% - ${this.$refs.toolBar.offsetHeight+10}px )`:'100%'
},
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);
// this.$message.error("初始化codemirror出错：" + e);
}
},
methods:{
onEditorModeChange(value) {
switch (value) {
case "json":
return "application/json";
case "sql":
return "sql";
case "javascript":
return "javascript";
case "xml":
return "xml";
case "css":
return "css";
case "html":
return "htmlmixed";
case "yaml":
return "yaml";
case "markdown":
return "markdown";
case "python":
return "python";
default:
return "application/json";
}
},
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);
});
},
resetFoldGutter() {
this.$refs.myCm.codemirror.setOption("foldGutter", false);
this.$nextTick(() => {
this.$refs.myCm.codemirror.setOption("foldGutter", true);
});
},
// 获取值
getValue() {
try {
return this.$refs.myCm.codemirror.getValue();
} catch (e) {
let errorInfo = e.toString();
this.$message.error("获取编辑框内容失败：" + errorInfo);
return errorInfo;
}
},
// 修改值
setValue(value) {
try {
if (typeof value != typeof "") {
this.$message.error(
"修改编辑框内容失败：编辑宽内容只能为字符串"
);
return;
}
if (this.cmOptions.mode == "application/json") {
this.editorValue = this.formatStrInJson(value);
} else {
this.editorValue = value;
}
} catch (e) {
this.$message.error("修改编辑框内容失败：" + e.toString());
}
},
// 黏贴事件处理函数
OnPaste(event) {
if (this.cmOptions.mode == "application/json") {
try {
this.editorValue = this.formatStrInJson(this.editorValue);
} catch (e) {
// 啥都不做
}
}
},
// 失去焦点时处理函数
onCmBlur(cm, event) {
this.$emit('onCmBlur',cm.getValue())
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();
},
onCmCodeChanges(cm, changes) {
this.editorValue = cm.getValue();
this.resetLint();
},
// 格式化字符串为json格式字符串
formatStrInJson(strValue) {
this.$emit('checkJson',strValue)
return JSON.stringify(
// JSON.parse(strValue.replace(/\s/g, '')),
JSON.parse(strValue),
null,
this.defaultJsonIndentation
);
},
},
}
</script>
<style lang="scss">
.CodeMirror-hints {
z-index: 3330 !important;
}
.code-mirror-div {
height: 100%;
.tool-bar {
margin: 10px 0;
}
}
.CodeMirror {
height: 100%;
border: 1px solid #ccc;
// border-bottom: 0px;
}
.CodeMirror-selected {
background-color: blue !important;
}
.CodeMirror-selectedtext {
color: white !important;
}
.cm-matchhighlight {
background-color: #fef6f6;
}
.CodeMirror-scroll {
margin: 0;
padding: 0;
}
.vue-codemirror {
height: 100%;
}
</style>
codemirror.js
import Vue from 'vue'
import { codemirror } from "vue-codemirror"
import 'codemirror/lib/codemirror.css'
Vue.use(codemirror);
import "codemirror/theme/blackboard.css";
import 'codemirror/theme/eclipse.css'
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";
require("script-loader!jsonlint");
// import "codemirror/addon/lint/css-lint.js";
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";
组件简单使用
checkJson: 用于json的格式化
<code-editor v-model="code" showTool @checkJson="checkJson" :options="{ mode:'json' }">
<template slot="tool_after">
<search-item label="模板名称">
<el-input size='mini' v-model="newTemObj.templateName"></el-input>
</search-item>
<search-item label="模板描述">
<el-input size='mini' v-model="newTemObj.templateRemark"></el-input>
</search-item>
</template>
</code-editor>
