使用vue2-ace-editor实现可选择的代码编辑器

最近在琢磨前端，因项目中需要在页面上编辑代码，所以需要写一个代码编辑器供用户使用。找了几个编辑器相关的组件，对比了下感觉还是vue2-ace-editor用着舒服，写了demo供大家参考。

由于我的项目使用的是vue2，二开鹅厂的bk-ci（蓝盾），因此基础组件使用的是bk组件。大家可以把选择框、按钮这些替换成自己使用的组件（如element-ui等）

组件已经封装好可以直接到手使用，支持更换主题、切换语言、缩进、搜索和替换（编辑器内Ctrl+F）、复制，json美化等...（后期加了字体大小选择和全屏功能，拉到底部查看代码）

效果图：

首先，到项目中安装插件：

npm install --save-dev vue2-ace-editor

安装成功后，引用组件，可在main.js中全局引用：

import Editor from 'vue2-ace-editor'
Vue.component('editor', Editor)

或直接在代码中局部引用（如我这里直接代码中引用）：

<template>
    <div>
        <bk-card title="代码编辑器">
            <div style="display: flex;  width: 100%; margin-right: 20px; margin-bottom: 10px;">
                
                <bk-select
                    :disabled="false"
                    placeholder="请选择主题"
                    search-placeholder="搜索主题"
                    v-model="valueTheme"
                    style="width: 150px; margin-right: 20px;"
                    @change="selectTheme"
                    searchable>
                    <bk-option v-for="option in listTheme"
                        :key="option"
                        :id="option"
                        :name="option">
                    </bk-option>
                </bk-select>

                <bk-select
                    :disabled="false"
                    placeholder="请选择语言"
                    search-placeholder="搜索语言"
                    v-model="valueCodeLang"
                    style="width: 150px; margin-right: 20px;"
                    @change="selectLang"
                    :font-size="large"
                    searchable>
                    <bk-option v-for="option in listCodeLang"
                        :key="option"
                        :id="option"
                        :name="option">
                    </bk-option>
                </bk-select>

                <bk-button theme="primary" icon="script-file" class="mr10" @click="copyCode()"> 复制代码</bk-button>
                <bk-button v-if="valueCodeLang === 'json'" theme="primary" icon="eye" class="mr10" @click="formatCode()"> 美化代码</bk-button>

            </div>

            <editor
                ref="aceEditor"
                v-model="content"
                @init="editorInit"
                width="100%"
                height="400px"
                :lang="lang"
                :theme="theme"
                :options="{
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true,
                    tabSize: 6, fontSize: 14,
                    readOnly: readOnly,//设置是否只读
                    showPrintMargin: false //去除编辑器里的竖线
                }"
            ></editor>
        </bk-card>
        
    </div>
</template>

<script>
    export default {
        components: {
            editor: require('vue2-ace-editor')
        },
        props: {
            // 是否只读
            readOnly: {
                type: Boolean,
                default: false
            },
            // 要展示的代码
            codeData: {
                type: String,
                default: ''
            },
            // 默认的主题
            valueTheme: {
                type: String,
                default: 'dracula'
            },
            // 默认的语言
            valueCodeLang: {
                type: String,
                default: 'json'
            }
        },
        data () {
            return {
                listTheme: [
                    'dracula',
                    'chrome',
                    'chaos',