CodeMirror 是一种非常强大的代码编辑器，它提供了许多对于 Vue.js 项目的开发非常有用的功能。如果您正在构建 Vue.js 项目并需要一个高效、灵活且易于使用的代码编辑器，则 CodeMirror 可能是您需要的工具之一。本文将向您介绍使用 vue-codemirror 为 Vue.js 项目搭建一个优秀的代码编辑环境，以便为 Vue 项目打造出高效且愉悦的开发体验。让我们一起开始构建一个强大的代码编辑环境吧！

安装依赖

CodeMirror 是一个基于Web技术的开源代码编辑器.

vue-codemirror 是一个基于 Vue.js 的代码编辑器组件，它集成了 CodeMirror 编辑器并提供了 Vue.js 组件化的封装

# 直接安装会安装最新版本，仅支持 Vue3.0 
npm i codemirror vue-codemirror --save

# Vue2.0 中需要指定安装 4.x 版本 
npm i codemirror vue-codemirror@4.x --save

导入

全局导入

import Vue from "vue"; 
import App from "./App"; 

// 导入与组件注册
import { codemirror } from "vue-codemirror";
Vue.component("codemirror", codemirror);

局部导入

// 导入
import { codemirror } from "vue-codemirror";

export default { 
    // 组件注册
    components: { codemirror }, 
};

使用

基本应用

  1. 导入样式资源
// 编辑器所需要的样式文件
import 'codemirror/lib/codemirror.css'

// 语言模式：根据不同的代码语言引入不同的js
// 你可以到 node_modules/codemirror/mode/ 下寻找需要的文件
import "codemirror/mode/javascript/javascript"

// 主题样式：代码块的主题
// 你可以到 node_modules/codemirror/theme/ 下寻找需要的文件
import 'codemirror/theme/idea.css'

// 附加功能：某些高级功能需要引入额外的 js 文件
// 你可以在 node_modules/codemirror/addon 下查找
// 代码折叠
import 'codemirror/addon/fold/foldgutter.css'
// 激活行高亮
import "codemirror/addon/selection/active-line.js"

// 其他...
  1. 准备HTML元素和数据
<!-- 双向绑定 使用 v-model -->
<codemirror v-model="code" :options="cmOptions"></codemirror>

<!-- 单向绑定 使用 value , 通过 input 事件获取输入的内容 -->
<codemirror 
    :value="code"
    :options="cmOptions"
    @input="onCmCodeChange">
</codemirror>
  1. 配置项
data() { 
    return { 
        code: "", 
        cmOptions: { 
            // 语言模式
            mode: "javascript", 
            // 主题
            theme: "idea", 
            // 显示行号
            lineNumbers: true, 
            // 自动缩进
            smartIndent: true, 
            // 自动匹配括号
            matchBrackets: true, 
            // 自动匹配引号
            matchTags: true, 
            // 代码折叠
            lineWrapping: true, 
            // 激活行高亮
            styleActiveLine: true, 
        }, 
    }; 
},

methods: { 
    onCmCodeChange(newCode) { 
        this.code = newCode; 
    }, 
},

资源介绍

关于配置项的一些常用总结：

分类代码说明
modetext/javascriptJavaScript
text/htmlHTML
text/cssCSS
application/xmlXML
application/jsonJSON
text/x-pythonPython
text/x-javaJava
text/x-rubyRuby
text/x-c++srcC++
text/x-csharpC#
themecobaltcobalt
draculadracula
monokaimonokai
ideaidea

封装一个组件

下面是一个封装好的组件，拿去用吧 🎉 ！

<template>
    <div>
        <codemirror ref="cm"
            :value="codestr"
            :options="cmOptions"
            @input="onCmCodeChange">
        </codemirror>
    </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

import "codemirror/mode/javascript/javascript"
import 'codemirror/theme/idea.css'

import 'codemirror/addon/fold/foldgutter.css"
import "codemirror/addon/selection/active-line.js"

export default {
    name: "CodeBlock",
    components: {
        codemirror
    },
    props: {
        codestr: {
            type: String,
            default: ""
        },
        codemode: {
            type: String,
            default: "json",
            validator: function (value) {
                return ['application/json'].includes(value);
            }

        },
        codetheme: {
            type: String,
            default: "idea",
            validator: function (value) {
                return ['idea'].includes(value);
            }
        }
    },
    mounted() {
        this.$refs.cm.codemirror.setSize("100%", 'auto');

    },
    computed: {
        cmOptions() {
            return {
                mode: this.codemode,
                theme: this.codetheme,

                // 是否显示行号
                lineNumbers: true,
                // 是否自动换行
                lineWrapping: true,

                // 代码折叠
                foldGutter: true,

                // 沟槽样式，传入数组会按顺序依次应用
                // 左侧是行号，行号右侧是折叠箭头
                gutters: [
                    "CodeMirror-linenumbers", 
                    "CodeMirror-foldgutter"
                ],

                // 高亮选中的行
                styleActiveLine: true,
            };
        }
    },

    data() {
        return {
            code: this.codestr
        }
    },

    methods: {
        getCurrentCode() {
            return this.code;
        },
        onCmCodeChange(newCode) {
            this.code = newCode;
        },
    },
}
</script>