vue项目引入代码编辑器

import Editor from 'vue2-ace-editor'

 components: { Editor }, 

 1.模板使用

<el-drawer title="代码编辑器" :visible.sync="htmlDialog" direction="rtl" :before-close="handleHtmlClose">
                <div class="codeEditBox">
                    <editor :lang="langs" v-model="formatHtml" @input='codeChange' :options="editorOptions" @init="editorInit" :theme="theme"></editor>
                </div>
                <div>
                    <el-button type="primary" @click="htmlHandle">确定</el-button>
                </div>
            </el-drawer>

 2.配置信息

editorOptions: {
                    // 设置代码编辑器的样式
                tabSize: 4, // tab默认大小
                showPrintMargin: false, // 去除编辑器里的竖线
                fontSize: 20, // 字体大小
                highlightActiveLine: true, // 高亮配置
                enableBasicAutocompletion: true, //启用基本自动完成
                enableSnippets: true, // 启用代码段
                enableLiveAutocompletion: true, // 启用实时自动完成
            },
            theme: 'monokai',
            langs: 'html',

3.主题设置

editorInit () {
            require('brace/ext/language_tools') // language extension prerequsite...
            require(`brace/mode/${this.langs}`) // 语言
            require(`brace/theme/${this.theme}`) // 主题
        },