实现代码：
setting.ts

import Vue from 'vue'
import { Component, Prop, Watch} from 'vue-property-decorator'
import  * as WithRender from './setting.html?style=./setting.less'
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/theme/monokai.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/hint/css-hint'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/mode/meta'
import "codemirror/addon/fold/foldgutter.css" 
import "codemirror/addon/fold/foldcode"
import "codemirror/addon/fold/brace-fold"
import 'codemirror/addon/selection/active-line'
@WithRender
@Component
export class Setting extends Vue{
    nameArray=new Array();
    modeArray=new Array();
    mapArray=new Array();
    CodeMirrorEditor;
    something="";    
    mounted(){
        console.log(CodeMirror)
        for(var i=0;i<CodeMirror.modeInfo.length;i++){
            let mode=CodeMirror.modeInfo[i];
            this.mapArray.push({name:mode.name,mode2:mode.mode})
        this.something="javascript"
        document.getElementById("theme").nodeValue="javascript"
        this.setmirror()
    transToSrc(name:string):string{  
        return "assets/codemirror/mode/"+name+"/"+name+".js";
    @Watch('something')
    aaa() {
        var headElement=document.body;
        var element=document.createElement("script");
        element.setAttribute("src",this.transToSrc(this.something));
        headElement.appendChild(element);
        element.() => {
          this.CodeMirrorEditor.setOption("mode",this.something)   
    setmirror(){
        let myTextarea = document.getElementById('editor');
        this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
            theme:'monokai', 
            styleActiveLine: true,
            mode:'javascript',
            extraKeys: {"Ctrl": "autocomplete"},//输入s然后ctrl就可以弹出选择项  
            // lineNumbers: true,
            tabSize:10,
            // readOnly:"nocursor",
            smartIndent:true,
            scrollbarStyle:"overlay"
            // keymap:"defaule"
        // this.CodeMirrorEditor.setOption('lineWrapping', true);
        this.CodeMirrorEditor.on("keypress",() =>{
            //编译器内容更改事件
            console.log(this.CodeMirrorEditor)
            this.CodeMirrorEditor.showHint();
        this.CodeMirrorEditor.setValue("Hello Kitty\nHello Tony\nHow are you\nFine thank you and you \nI love you")
        this.CodeMirrorEditor.setOption("lineNumbers","true")
        // this.CodeMirrorEditor.addOverlay("coconut");
        // this.CodeMirrorEditor.markText({line:0,ch:0},{line:0,ch:0})
        this.CodeMirrorEditor.setBookmark({line:0,ch:0},{line:0,ch:1},{readOnly:true}); 
        this.CodeMirrorEditor.setCursor(0)
        this.CodeMirrorEditor.setSize(600,600)
setting.html
<div class="setting">   
    <select id="theme"  v-model="something">
        <option v-for="name in mapArray" :value='name.mode2'>{{name.name}}</option>
    </select>
    <textarea id="editor" name="editor">
    </textarea>
setting.less
.setting{
    margin: 0;
    width: 1398px;
    height: 600px;
    background-color: rgb(248, 248, 248);
        margin: 0;
				
用户手册和参考指南版本5.46.1
CodeMirror是一个代码编辑器组件，可以嵌入到Web页面中。核心库仅提供编辑器组件，不提供伴随按钮，自动完成或其他IDE功能。它确实提供了丰富的API，在此基础上可以直接实现这些功能。有关额外功能的可重用实现，请参阅分发中包含的插件和外部托管插件列表。
CodeMirror使用特定于语言的模式。模式是JavaScript程序，可帮助用给定语言编写的文本...
<linkrel="stylesheet"href="codemirror.css"><!--引入CSS文件-->
<scriptsrc="codemirror.js"></script><!--引入JS文件-->
</hea...
				setup.resources.dll setup936.dll setup2k.dll settingsyncdownloadhelper.dll setup16.dll setup100