Question

我将这个Vue2组件用于ACE编辑器： https://github.com/chairuosen/vue2-ace-editor

这就是我将组件添加到我的应用程序的方式

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>

然而，编辑器使用我不需要的装订线渲染，所以我想访问编辑器实例来调整一些属性。

此组件的源代码表示它在mount上发出事件：

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方法中，传入的参数将是编辑器的实例。我相信你可以指定不像这样渲染阴沟：

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

vuejs2-ace-editor：访问编辑器实例

1 个答案: