Editor.vue

<script>
    /**
     * @property validator
     **/
    import Ace from "ace-builds/src-noconflict/ace";
    import "ace-builds/webpack-resolver";
    export default {
        props: {
            value: {
                required: true
            },
            lang: {
                type: String,
                default: ()=> 'sh'
            },
            theme: {
                type: String,
                default: ()=> 'dracula'
            }
        },
        data () {
            return {
                content: this.value
            }
        },
        watch: {
            value(value) {
                if (this.content !== value) {
                    this.$options.editor.setValue(value, 1)
                }
            }
        },
        methods:{
            init(){
                this.$options.editor = Ace.edit(this.$refs.editor, {
                    mode: `ace/mode/${this.lang}`,
                    theme:`ace/theme/${this.theme}`,
                    maxLines: 50,
                    minLines: 10,
                    fontSize: 18
                })
                this.$options.editor.setValue(this.content || '#!/usr/bin/env bash', 1)
                this.$options.editor.on('change', () => {
                    this.content = this.$options.editor.getValue()
                    this.$emit('input', this.content)
                })
            }
        },
        created() {
            this.$nextTick(() =>this.init())
        }
    }
</script>
<template>
    <div>
        <div ref="editor" class="w-full" style="min-height: 300px"></div>
    </div>
</template>