vuejs2-ace-Editor: Zugriff Editor Instanz

Question

Ich bin mit dieser Vue2 Komponente für ACE-Editor: https://github.com/chairuosen/vue2-ace-editor

Dies ist, wie ich die Komponente zu meinem app

var app = new Vue({ 
    el: '#vue_app', 
    data: { 
     message: 'Hello Vue!', 
     editor_content: 'somecontent' 
    }, 
    methods:{ 
     editorInit:function (el) { 
      require('brace/mode/json'); 
      require('brace/theme/tomorrow'); 
     } 
    }, 
    components: { 
     editor:require('vue2-ace-editor') 
    } 
}); 

hinzufügen Und wenn ich diese setzen richtig in meine HTML funktioniert alles:

<editor v-model="editor_content" @init="editorInit();" lang="json" theme="tomorrow" width="500" height="100"></editor> 

jedoch der Editor mit einer Rinne macht, die ich nicht brauche, so will ich den Editor Instanz zugreifen einige pr zwicken operiert.

Der Quellcode für diese Komponente, sagt er ein Ereignis auf dem Berg aussendet:

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); 

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

    editor.$blockScrolling = Infinity; 
    editor.setOption("enableEmmet", true); 
    editor.getSession().setMode('ace/mode/'+lang); 
    editor.setTheme('ace/theme/'+theme); 
    editor.setValue(this.value,1); 

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


} 

Wie und wo ich dieses Ereignis zu fangen und auf das editor Objekt?

Answer 1

Sie hören bereits das Ereignis init und rufen die Methode editorInit auf. Sie müssen jedoch die Daten übergeben, die von der Komponente <editor> ausgegeben werden.

können Sie entweder tun, dass explizit durch $event mit:

<editor v-model="editor_content" @init="editorInit($event)" ...></editor> 

oder implizit, indem Sie einfach den Namen der Methode, wie der Event-Handler bereitstellt:

<editor v-model="editor_content" @init="editorInit" ...></editor> 

Dann in Ihrer editorInit Methode, die param Die Eingabe wird die Instanz des Editors sein. Und ich glaube, dass Sie spezifizieren können, um die Gosse nicht so zu machen:

editorInit:function (editor) { 
    editor.renderer.setShowGutter(false) 
    require('brace/mode/json'); 
    require('brace/theme/tomorrow'); 
}