目录
- vue2 导入使用vue-codemirror详解
- 1 介绍
- 2 安装使用
- 2.1 安装 vue-codemirror
- 2.2 使用 codemirror
- 2.2.1 引入
- 3 配置详情
- 3.1 语言模式配置
- 3.2 自动高度设置
- 3.4 主题配置
- 4 总结
vue2 导入使用vue-codemirror详解
1 介绍
vue-codemirror是一个基于Vue的代码在线编辑器组件，它封装了CodeMirror编辑器，使得在Vue项目中可以方便地使用CodeMirror。vue-codemirror提供了丰富的配置选项，包括语言模式、高度、自动补全、代码折叠等功能，可以满足大部分代码编辑的需求。相比于其他编辑器，vue-codemirror支持的语言模式非常丰富，包括JavaScript、Python、Java等100多种语言。同时，vue-codemirror还支持自动补全、语法高亮、自动提示等功能，使得代码编辑更加高效和便捷。
使用vue-codemirror非常简单，只需要在Vue组件中引入并注册即可。可以通过设置组件的属性来配置CodeMirror编辑器的各种选项，例如语言模式、高度、自动补全等。同时，也可以使用Vue的响应式数据来动态更新编辑器的内容。
2 安装使用
2.1 安装 vue-codemirror
// 指定安装4.x版本
// 目前最新版本6.x，仅支持Vue3.0
npm i vue-codemirror@4.x --save// codemirror 需要与 vue-codemirror 同时安装
npm i codemirror@5.x --save 2.2 使用 codemirror
2.2.1 引入
新建样式以及配置文件cm-setting.js
// cm-setting.js
// 组件样式
import "codemirror/lib/codemirror.css";
// 主题
import "codemirror/theme/3024-day.css"; // 引入主题样式，根据设置的theme的主题引入
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/monokai.css";
import 'codemirror/theme/rubyblue.css';// html代码高亮
import "codemirror/mode/htmlmixed/htmlmixed.js"; // 语言模式
import 'codemirror/mode/javascript/javascript.js'
1.全局引入
// main.js
import Vue from "vue";
import App from "./App";// 引入
import { codemirror } from "vue-codemirror";// 引入配置对应的文件（样式、主题、代码格式等）
import "@/utils/cm-setting.js";// 注册使用
Vue.component("codemirror", codemirror);.....
- 局部 (按需) 引入
<template><div class="content"><codemirror v-model="code" :options="options"></codemirror></div>
</template><script>
// 文件内引入
import { codemirror } from "vue-codemirror";
// 引入样式、主题、代码风格等配置或样式文件
import "@/utils/cm-setting.js";
export default {// 注册使用components: {codemirror,},data() {return {code: "",options: {line: true,theme: "rubyblue", // 主题tabSize: 4, // 制表符的宽度indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。readOnly: false, // 只读autorefresh: true,smartIndent: true, // 上下文缩进lineNumbers: true, // 是否显示行号styleActiveLine: true, // 高亮选中行viewportMargin: Infinity, //处理高度自适应时搭配使用showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标mode: "javascript",},};},
};
</script>
效果如图所示：
以上为javascript语言编辑器使用教学，更多配置请看配置详情部分；
3 配置详情
3.1 语言模式配置
对应option.mode配置，详细配置如下：
-
JavaScript模式：
- 配置项：mode
- 描述：JavaScript模式用于编辑和显示JavaScript代码。可以在mode属性中设置"javascript"来启用JavaScript模式。
-
Python模式：
- 配置项：mode
- 描述：Python模式用于编辑和显示Python代码。可以在mode属性中设置"python"来启用Python模式。
-
Java模式：
- 配置项：mode
- 描述：Java模式用于编辑和显示Java代码。可以在mode属性中设置"text/x-java"来启用Java模式。
-
JSON模式：
- 配置项：mode
- 描述：JSON模式用于编辑和显示JSON数据。可以在mode属性中设置"application/json"来启用JSON模式。
-
XML模式：
- 配置项：mode
- 描述：XML模式用于编辑和显示XML数据。可以在mode属性中设置"application/xml"来启用XML模式。
-
HTML模式：
- 配置项：mode
- 描述：HTML模式用于编辑和显示HTML代码。可以在mode属性中设置"text/html"来启用HTML模式。
-
Markdown模式：
- 配置项：mode
- 描述：Markdown模式用于编辑和显示Markdown文本。可以在mode属性中设置"text/x-markdown"来启用Markdown模式。
-
CSS模式：
- 配置项：mode
- 描述：CSS模式用于编辑和显示CSS代码。可以在mode属性中设置"text/css"来启用CSS模式。
-
Clike模式：
- 配置项：mode
- 描述：Clike模式用于编辑和显示类似于C语言的代码，支持C、C++、Java、JavaScript等语言。可以在mode属性中设置"text/x-clike"来启用Clike模式。
-
SQL模式：
- 配置项：mode
- 描述：SQL模式用于编辑和显示SQL代码。可以在mode属性中设置"text/x-sql"来启用SQL模式。
3.2 自动高度设置
可以通过监听 CodeMirror 编辑器的
resize事件，然后动态调整高度。以下是一个简单的示例，展示了如何在 Vue 组件中实现自动高度的 Vue-codemirror：
<template> <div> <codemirror v-model="code" @resize="onResize" :options="cmOptions" ></codemirror> </div> </template> <script> import { codemirror } from 'vue-codemirror' import 'codemirror/lib/codemirror.css' import 'codemirror/mode/javascript/javascript.js' // 引入你需要的模式 export default { components: { codemirror }, data() { return { code: '', cmOptions: { tabSize: 4, lineNumbers: true, mode: 'javascript', // 或者其他模式，例如 'python'、'markdown' 等 theme: 'default', // 或者其他主题，例如 'monokai'、'solarized' 等 line: true, // 显示行号 styleActiveLine: true, // 高亮显示当前行 matchBrackets: true, // 括号匹配高亮 extraKeys: { 'Ctrl': 'autocomplete' }, // 自定义按键映射 } } }, methods: { onResize() { // 重新计算高度，这里只是一个示例，你可以根据实际需求进行调整 this.$refs.cm.setSize(null, this.$refs.cm.defaultView.wrapper.clientHeight) } }, mounted() { // 获取 CodeMirror 组件的引用，以便后续操作 this.$refs.cm = this.$refs.codemirror.$refs.cmEditor.$refs.editor; } } </script>在这个例子中，我们监听了
resize事件，并在onResize方法中重新设置了编辑器的高度。请注意，你需要根据你的实际需求来调整onResize方法中的计算方式。
3.4 主题配置
在全局配置中引入想要的主题样式，即可在option中使用，如下：
// cm-setting.js
import 'codemirror/theme/rubyblue.css'
vue文件：
options: {theme: "rubyblue", // 主题
}
4 总结
vue-codemirror是一个开源项目，有着良好的社区支持。如果遇到问题，可以在社区中寻求帮助或者查找相关资料。
vue-codemirror也存在一些缺点：
- 依赖较多：vue-codemirror依赖于CodeMirror和Vue，需要额外安装和配置这些依赖。
- 移动端支持不佳：vue-codemirror在移动端浏览器上的支持情况不佳，可能会遇到一些兼容性问题。
- 定制性有限：虽然vue-codemirror提供了丰富的配置选项，但对于一些高级定制需求来说可能还不够。如果需要更多高级功能或者定制化需求，可能需要自己进行开发或者寻找其他解决方案。
综上所述，vue-codemirror是一个功能强大、易于使用的代码编辑器组件，适用于需要进行代码编辑和管理的Vue项目。但是需要注意其存在的缺点，并谨慎处理相关问题。
