vuejs2-ACE編輯：訪問編輯器實例

我使用了ACE編輯此Vue2組件： https://github.com/chairuosen/vue2-ace-editor vuejs2-ACE編輯：訪問編輯器實例

這是我如何將組件添加到我的應用程序

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

當我把這個進入我的HTML一切正常：

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

但是編輯與我不需要一個排水溝渲染，所以我要訪問的編輯器實例來調整一些公關operties。

此組件的源代碼中說，它發出山事件：

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對象？

來源

2017-09-15 kurtgn

您已在收聽init事件並調用editorInit方法。但是，您需要傳遞<editor>組件發出的數據。

你可以做到這一點明確使用$event：

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

或含蓄通過簡單的提供方法名作爲事件處理程序：

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

然後，在你editorInit方法，帕拉姆被傳入將是編輯器的實例。我相信你可以指定不渲染陰溝這樣的：

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

來源

2017-09-15 11:51:52 thanksd

vuejs2-ACE編輯：訪問編輯器實例

回答

相關問題