引用编辑器组件
<template>
<div class="code-mirror-div">
<div class="tool-bar">
<span>请选择主题</span>
<el-select v-model="cmTheme" placeholder="请选择" size="small" style="width:150px">
<el-option v-for="item in cmThemeOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
<span style="margin-left: 10px">请选择编辑模式</span>
<el-select
v-model="cmEditorMode"
placeholder="请选择"
size="small"
style="width:150px"
@change="onEditorModeChange"
>
<el-option
v-for="item in cmEditorModeOptions"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
<el-button type="primary" size="small" style="margin-left:10x" @click="setStyle">修改样式</el-button>
<el-button type="primary" size="small" style="margin-left:10x" @click="getValue">获取内容</el-button>
<el-button type="primary" size="small" style="margin-left:10x" @click="setValue">修改内容</el-button>
</div>
<code-mirror-editor
ref="cmEditor"
:cmTheme="cmTheme"
:cmMode="cmMode"
:autoFormatJson="autoFormatJson"
:jsonIndentation="jsonIndentation"
></code-mirror-editor>
</div>
</template>
<script>
// 使用时需要根据CodeMirrorEditor.vue的实际存放路径，调整from后面的组件路径，以便正确引用
import CodeMirrorEditor from "@/common/components/public/CodeMirrorEditor";
export default {
components: {
CodeMirrorEditor
},
data() {
return {
cmTheme: "default", // codeMirror主题
// codeMirror主题选项
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"
],
cmEditorMode: "default", // 编辑模式
// 编辑模式选项
cmEditorModeOptions: [
"default",
"json",
"sql",
"javascript",
"css",
"xml",
"html",
"yaml",
"markdown",
"python"
],
cmMode: "application/json", //codeMirror模式
jsonIndentation: 2, // json编辑模式下，json格式化缩进 支持字符或数字，最大不超过10，默认缩进2个空格
autoFormatJson: true // json编辑模式下，输入框失去焦点时是否自动格式化，true 开启， false 关闭
};
},
methods: {
// 切换编辑模式事件处理函数
onEditorModeChange(value) {
switch (value) {
case "json":
this.cmMode = "application/json";
break;
case "sql":
this.cmMode = "sql";
break;
case "javascript":
this.cmMode = "javascript";
break;
case "xml":
this.cmMode = "xml";
break;
case "css":
this.cmMode = "css";
break;
case "html":
this.cmMode = "htmlmixed";
break;
case "yaml":
this.cmMode = "yaml";
break;
case "markdown":
this.cmMode = "markdown";
break;
case "python":
this.cmMode = "python";
break;
default:
this.cmMode = "application/json";
}
},
// 修改样式（不推荐，建议参考<style>中的样式，提前配置好样式）
setStyle() {
let styleStr =
"position: absolute; top: 80px; left: 50px; right: 200px; bottom: 20px; padding: 2px; height: auto;";
this.$refs.cmEditor.setStyle(styleStr);
},
//获取内容
getValue() {
let content = this.$refs.cmEditor.getValue();
console.log(content);
},
//修改内容
setValue() {
let jsonValue = {
name: "laiyu",
addr: "广东省深圳市",
other: "nothing",
tel: "168888888",
intro: [{ item1: "item1" }]
};
this.$refs.cmEditor.setValue(JSON.stringify(jsonValue));
}
}
};
</script>
<style>
.CodeMirror {
position: absolute;
top: 80px;
left: 2px;
right: 5px;
bottom: 0px;
padding: 2px;
height: auto;
overflow-y: auto;
}
</style>
<style lang="scss" scoped>
.code-mirror-div {
position: absolute;
top: 0px;
left: 2px;
right: 5px;
bottom: 0px;
padding: 2px;
.tool-bar {
top: 20px;
margin: 30px 2px 0px 20px;
}
}
</style>
效果展示
- 1. 支持多主题
- 2. 代码折叠/展开
- 3. 静态代码语法检查
- 4. 查找内容
- 5. 批量替换内容
- 6. 跳转到指定行
- 7. 自动补全提示
- 8. 自动匹配xml标签
- 9. 自动匹配括号
- 10. 鼠标点击高亮匹配单词
