Vue中codemirror代码区域组件使用

安装

npm install vue-codemirror --save

引入

全局

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)

局部

import { codemirror } from 'vue-codemirror'
import "codemirror/theme/duotone-light.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import "codemirror/mode/javascript/javascript"; // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import 'codemirror/lib/codemirror.css'

写法

<template>
    <codemirror
	    ref="mycode"
	    :value="data"
	    :options="cmOptions"
	    class="code"
	    :style="'width:' + width + 'px'">
    </codemirror>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/duotone-light.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import "codemirror/mode/javascript/javascript"; // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import 'codemirror/lib/codemirror.css'

export default {
    components:{
        codemirror
    },
    props:{
        data:{
            type:String,
            default:'暂无'
        },
        width:{
            type:Number,
            default:600
        },
        mode:{
            type:String,
            default:'javascript'
        },
        theme:{
            type:String,
            default:'duotone-light'
        },
        readOnly:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return{
            cmOptions:{
                value:'',//编辑器的初始值
                mode: 'text/javascript',//模式
                theme: 'duotone-light',//css样式选择
                // indentUnit: 2,//缩进单位，默认2
                smartIdent: true,//是否智能缩进
                // tabSize:4,//tab缩进,默认4
                readOnly:true,//是否只读
                showCursorWhenSelecting:false,//选择处于活动状态时是否应绘制光标
                lineNumbers:false,//是否显示行号
                firstLineNumber:1,
                lineWrapping:true,
            }
        }
    },
    created(){
        this.cmOptions.mode = 'text/'+ this.mode
        this.cmOptions.theme = this.theme
        this.cmOptions.readOnly = this.readOnly
    }
};
</script>
<style scoped>
.code{
    text-align: left;
    border: 2px solid #9E9E9E;
    /* width: 600px; */
    /* height: 240px; */
}
.CodeMirror-line span{
    color: #505050;
    font-family: "微软雅黑";
}
::v-deep .CodeMirror-scroll {
    height: auto !important;
    overflow-y: hidden;
    overflow-x: auto;
}
::v-deep .CodeMirror{
    font-family: "微软雅黑";
    height: auto !important;
    font-size: 14px;
}
.left{
    display: inline-block;
    -webkit-box-shadow: 0px 2px 8px #888888;
    box-shadow: 0px 2px 8px #888888;
}
</style>

使用效果

官方文档

https://codemirror.net/#description