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);
	
.....

2. 局部 (按需) 引入

<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配置，详细配置如下：

1. JavaScript模式：

   • 配置项：mode
   • 描述：JavaScript模式用于编辑和显示JavaScript代码。可以在mode属性中设置"javascript"来启用JavaScript模式。

2. Python模式：

   • 配置项：mode
   • 描述：Python模式用于编辑和显示Python代码。可以在mode属性中设置"python"来启用Python模式。

3. Java模式：

   • 配置项：mode
   • 描述：Java模式用于编辑和显示Java代码。可以在mode属性中设置"text/x-java"来启用Java模式。

4. JSON模式：

   • 配置项：mode
   • 描述：JSON模式用于编辑和显示JSON数据。可以在mode属性中设置"application/json"来启用JSON模式。

5. XML模式：

   • 配置项：mode
   • 描述：XML模式用于编辑和显示XML数据。可以在mode属性中设置"application/xml"来启用XML模式。

6. HTML模式：

   • 配置项：mode
   • 描述：HTML模式用于编辑和显示HTML代码。可以在mode属性中设置"text/html"来启用HTML模式。

7. Markdown模式：

   • 配置项：mode
   • 描述：Markdown模式用于编辑和显示Markdown文本。可以在mode属性中设置"text/x-markdown"来启用Markdown模式。

8. CSS模式：

   • 配置项：mode
   • 描述：CSS模式用于编辑和显示CSS代码。可以在mode属性中设置"text/css"来启用CSS模式。

9. Clike模式：

   • 配置项：mode
   • 描述：Clike模式用于编辑和显示类似于C语言的代码，支持C、C++、Java、JavaScript等语言。可以在mode属性中设置"text/x-clike"来启用Clike模式。

10. 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也存在一些缺点：

1. 依赖较多：vue-codemirror依赖于CodeMirror和Vue，需要额外安装和配置这些依赖。
2. 移动端支持不佳：vue-codemirror在移动端浏览器上的支持情况不佳，可能会遇到一些兼容性问题。
3. 定制性有限：虽然vue-codemirror提供了丰富的配置选项，但对于一些高级定制需求来说可能还不够。如果需要更多高级功能或者定制化需求，可能需要自己进行开发或者寻找其他解决方案。

综上所述，vue-codemirror是一个功能强大、易于使用的代码编辑器组件，适用于需要进行代码编辑和管理的Vue项目。但是需要注意其存在的缺点，并谨慎处理相关问题。