vue2-ace-editor 在线编辑器用法

先看效果

vue2-ace-editor简介

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate 等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9IDE的主要编辑器 ，并且是 Mozilla Skywriter (Bespin) 项目的继承者。

安装vue2-ace-editor依赖

npm install vue2-ace-editor --save

代码实例

ace-js.vue 组件代码

<template>
    <div class="codeEditBox" :style="{ height: height + 'px' }">
        <aceEditor ref="editor" :value="value" :lang="options.lang" :theme="theme" :options="options" @init="initEditor" v-bind="config">
        </aceEditor>
    </div>
</template>


<script>
//引入vue2-ace-editor
import aceEditor from 'vue2-ace-editor'
//引入ace 后续修改自定义标签用到
import ace from 'brace'
//代码提示
import 'brace/ext/language_tools'
import 'brace/mode/javascript'
import 'brace/snippets/javascript'
//搜索
import 'brace/ext/searchbox'
//主题
//白底色 带高亮
import 'brace/theme/chrome'
//白底色黑字  不带高亮
import 'brace/theme/github'
//黑底色
import 'brace/theme/tomorrow_night_eighties'
//蓝底色
import 'brace/theme/tomorrow_night_blue'
//黑底色
import 'brace/theme/vibrant_ink'

export default {
   
    name: 'Editor',
    components: {
   
        aceEditor
    },
    props: {
   
        value: {
   
            type: String,
            default: ''
        },
        height: {
   
            type: Number,
            default: 300
        },
        readOnly: {
   
            type: Boolean,
            default: false
        },
        theme: {
   
            type: String,
            default: 'chrome'
        },
        config: {
   
            type: Object,
            default: () => {
   
                return {
   
                    fontSize: 16
                }
            }
        }
    },
    computed: {
   
        options() {
   
            return {
   
                lang: 'javascript',//语言
                enableBasicAutocompletion: true,//启动代码补全功能