vuejs2 에이스 편집기 : 접근 에디터 인스턴스

Question

내가 ACE 편집기이 Vue2 구성 요소를 사용하고 있습니다 : 나는 내 응용 프로그램

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

을에 구성 요소를 추가 내가이 둘 때 어떻게 https://github.com/chairuosen/vue2-ace-editor

입니다 내 HTML로 모든 것이 제대로 작동 :

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

을 편집기 내가 필요하지 않은 홈통로 렌더링하지만, 그래서 약간의 홍보를 조정할 에디터 인스턴스에 액세스 할 오티스.

이 구성 요소의 소스 코드는 마운트 이벤트를 방출 말한다 :

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


} 

어떻게 내가이 이벤트를 잡을 않는 곳 editor 개체에 액세스?

Answer 1

이미 init 이벤트를 듣고 editorInit 메서드를 수신하고 있습니다. 그러나 <editor> 구성 요소가 방출하는 데이터를 전달해야합니다.

명시 적으로 $event를 사용하여 해당 작업을 수행 할 수 있습니다 :

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

또는 암시 적으로 단순히 이벤트 핸들러로 메소드 이름을 제공 :

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

그런 다음 editorInit 방법에서는 PARAM을 전달되는 것은 편집기의 인스턴스가됩니다. 그리고 시궁창을 이렇게 렌더링하지 않도록 지정할 수 있다고 생각합니다.

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