正文

demo展示

创建组件

直接使用封装好的组件

1
npm install @dllcn/vue-ace

自己实现

  1. 安装依赖

    1
    npm install brace

  2. 创建组件(xxx.js)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    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,
            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 vm = this;
            var lang = this.lang||'text';
            var theme = this.theme||'chrome';

            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;

            editor.on('change',function () {
                var content = editor.getValue();
                vm.$emit('input',content);
                vm.contentBackup = content;
            });
            if(vm.options)
                editor.setOptions(vm.options);
        }
    }

使用

1
2

<editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100"></editor>
1
2
3
4
5
6
7
8
9
10
11
12
13
{
    data,
    methods: {
        editorInit: function () {
            require('brace/ext/language_tools') //language extension prerequsite...
            require('brace/mode/html')                
            require('brace/mode/javascript')    //language
            require('brace/mode/less')
            require('brace/theme/chrome')
            require('brace/snippets/javascript') //snippet
        }
    },
}