vue2-ace-editor

https://www.npmjs.com/package/vue2-ace-editor4

var ace = require('brace');

module.exports = {
    render: function (h) {
        var height = this.height ? this.px(this.height) : '100%'
        var width = this.width ? this.px(this.width) : '100%'
        return h('div', {
            attrs: {
                style: "height: " + height + '; width: ' + width,
            }
        })
    },
    props: {
        value: String,
        lang: true,
        theme: String,
        height: true,
        width: true,
        autoComplete: false, //源码中添加该配置
        options: Object
    },
    data: function () {
        return {
            editor: null,
            contentBackup: ""
        }
    },
    methods: {
        px: function (n) {
            if (/^\d*$/.test(n)) {
                return n + "px";
            }
            return n;
        }
    },
    watch: {
        value: function (val) {
            if (this.contentBackup !== val) {
                this.editor.session.setValue(val, 1);
                this.contentBackup = val;
            }
        },
        theme: function (newTheme) {
            this.editor.setTheme('ace/theme/' + newTheme);
        },
        lang: function (newLang) {
            this.editor.getSession().setMode(typeof newLang === 'string' ? ('ace/mode/' + newLang) : newLang);
        },
        options: function (newOption) {
            this.editor.setOptions(newOption);
        },
        height: function () {
            this.$nextTick(function () {
                this.editor.resize()
            })
        },
        width: function () {
            this.$nextTick(function () {
                this.editor.resize()
            })
        }
    },
    beforeDestroy: function () {
        this.editor.destroy();
        this.editor.container.remove();
    },
    mounted: function () {
        var _this = this //插入该行，直接使用this会报错
        var vm = this;
        var lang = this.lang || 'text';
        var theme = this.theme || 'chrome';
        var autoComplete = this.autoComplete || false //插入该行
        require('brace/ext/emmet');

        var editor = vm.editor = ace.edit(this.$el);
        editor.$blockScrolling = Infinity;

        this.$emit('init', editor);

        //editor.setOption("enableEmmet", true);
        editor.getSession().setMode(typeof lang === 'string' ? ('ace/mode/' + lang) : lang);
        editor.setTheme('ace/theme/' + theme);
        if (this.value)
            editor.setValue(this.value, 1);
        this.contentBackup = this.value;

        // 插入以下代码块
        if (autoComplete) {
            var staticWordCompleter = {
                getCompletions: function (editor, session, pos, prefix, callback) {
                    _this.$emit('setCompletions', editor, session, pos, prefix, callback)
                }
            }
            var lnTools = ace.acequire("ace/ext/language_tools")
            lnTools.addCompleter(staticWordCompleter)
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true, //智能补全
            })
        }
        editor.on('change', function () {
            var content = editor.getValue();
            vm.$emit('input', content);
            vm.contentBackup = content;
        });
        // newadd
        editor.on('focus', function () {
            vm.$emit('focus');
        });
        // newadd
        editor.on('blur', function () {
            vm.$emit('blur');
        });
        if (vm.options)
            editor.setOptions(vm.options);
    }
}