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编辑：访问编辑器实例

回答

相关问题