vue2 导入使用vue-codemirror详解

目录
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的代码在线编辑器组件，它封装了C++odeMirror编辑器，使得在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);

…..

‘
运行运行
局部 (按需) 引入

效果如图所示：

​

以上为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：

在这个例子中，我们监听了 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项目。但是需要注意其存在的缺点，并谨慎处理相关问题。