一.简介

vue-codemirror是基于 CodeMirror，适用于 Vue 的 Web 代码编辑器。

插件地址：https://www.npmjs.com/package/vue-codemirror

二. 安装

> npm install vue-codemirror --save

安装其他插件：

> npm install @codemirror/lang-css --save
> npm install @codemirror/lang-html --save
> npm install @codemirror/lang-javascript --save
> npm install @codemirror/theme-one-dark --save

三. 新建codemirror.vue组件

<template>
    <div class="codemirror">
        <Codemirror 
        class="code" 
        v-model="code" 
        :style="{ height: '100%' }" 
        :mode="mode" 
        :spellcheck="true"
        :autofocus="true" 
        :indent-with-tab="true" 
        :tabSize="4" 
        :extensions="extensions" />
    </div>
</template>
<script setup>
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { css } from '@codemirror/lang-css';
import { html } from '@codemirror/lang-html';
import { oneDark } from '@codemirror/theme-one-dark';
// 引入vue模块
import { ref, reactive, onMounted } from 'vue';
let code = ref('');
let mode = ref('');
let extensions = [];

// 定义从父组件接收的属性
const props = defineProps({
    option: Object,
});

onMounted(() => {
    mode.value = props.option.options.mode;
    code.value = props.option.options.code;
    if (props.option.options.language === 'js') {
        extensions = [javascript(), oneDark];
    } else if (props.option.options.language === 'css') {
        extensions = [css(), oneDark];
    } else {
        extensions = [html(), oneDark];
    }
});
</script>
<style scoped>
.codemirror {
    width: 100%;
    height: 100%;
}
</style>

四.使用

<template>
    <div class="vue-codemirror">
        <el-row :gutter="15" class="mirow">
            <el-col :span="12" class="micol">
                <el-row class="mitoprow">
                    <el-card class="box-card">
                        <template v-slot:header>
                            <div class="clearfix">
                                <span>HTML</span>
                            </div>
                        </template>
                        <Codemirror :option="editorp" />
                    </el-card>
                </el-row>
                <el-row class="mibottomrow">
                    <el-card class="box-card">
                        <template v-slot:header>
                            <div class="clearfix">
                                <span>CSS</span>
                            </div>
                        </template>
                        <Codemirror :option="editorp2" />
                    </el-card>
                </el-row>
            </el-col>
            <el-col :span="12" class="micol">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>JAVASCRIPT</span>
                        </div>
                    </template>
                    <Codemirror :option="editorp3" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import Codemirror from "../../components/editor/codemirror.vue";
// 引入vue模块
import { ref, reactive } from 'vue';
const options = {
    language: 'html',
    mode: 'text/html',
    code: `<button class="btn">默认按钮</button>`
}
const options2 = {
    language: 'css',
    mode: 'text/css',
    code: `.btn {
        color: red;
    }`
}

const options3 = {
    language: 'js',
    mode: 'text/javascript',
    code: `console.log(1111);`
}

const editorp = reactive({
    el: 'editor',
    options: options
});

const editorp2 = reactive({
    el: 'editor2',
    options: options2
});

const editorp3 = reactive({
    el: 'editor3',
    options: options3
});

</script>
<style scoped>
.vue-codemirror {
    width: 100%;
    height: 100%;
}
.mirow {
    width: 100%;
    height: 100%;
}

.micol {
    height: 100%;
}

.mitoprow {
    margin-bottom: 15px;
    height: calc(50% - 15px);
}

.mibottomrow {
    height: 50%;
}

.el-card {
    border-radius: 0px;
    border: none;
    width: 100%;
    height: 100%;
}

:deep(.el-card__body) {
    width: calc(100% - 40px);
    height: calc(100% - 98px);
}
</style>

五.效果