Question

我有一个扩展/折叠ace编辑器大小的功能，这是由按钮触发的。

一旦编辑获得关注，我需要触发'扩展'。所以我做了这样的事情：

var editor = ace.edit("theeditor");
editor.on("focus", myFocusHandler);

而myFocusHandler看起来像这样：

var myFocusHandler = function(event) {
    // do some resize stuff here ...
    var toggleSizeButton = jQuery("expand-collapse-button");
    toggleSizeButton .toggleClass("glyphicon-resize-small");
    toggleSizeButton .toggleClass("glyphicon-resize-full");
}

到目前为止一切顺利。当我不得不重构我的代码以支持同一网页中的多个ace编辑器时，问题就出现了。使用jQuery，我可以使用事件处理程序中的this来获取当前编辑器，然后使用jQuery DOM遍历函数获取相对于它的按钮。我怎样才能（或将事件数据传递）到Ace的事件处理程序中？我想做这样的事情：

var myFocusHandler = function(event) {
    // do some resize stuff here...
    var theEditorDiv = jQuery(this); // I know this is wrong
    var toggleSizeButton = theEditorDiv.prev("div.toggle-button").find(".glyphicon");
    toggleSizeButton.toggleClass("glyphicon-resize-small");
    toggleSizeButton.toggleClass("glyphicon-resize-full");
}

对jQuery(this)的调用有两个原因：第一，this未定义，第二，即使它是对编辑器的有效引用，它也不是DOM元素。

所以，这里有两个问题。

如何在事件处理程序
如何获取内置ace编辑器的div元素。

任何想法？ Ace编辑器API文档没有提供任何线索。

Answer 1

在事件监听器中只有实验api用于获取事件目标。你可以做到

var myFocusHandler = function(event, editor) {
    var theEditorDiv = jQuery(editor.container);

Answer 2

Ace将编辑器对象公开为事件的第二个参数。您可以执行以下操作：

HTML

<h2>Editor 1</h2>
<pre class="editor"></pre>

<h2>Editor 2</h2>
<pre class="editor"></pre>

的Javascript

$('.editor').each(function() {

    var editor = ace.edit(this);

    editor.on('focus', function(event, editor) {
         $(editor.container).animate({ width: 500 });
    });

    editor.on('blur', function(event, editor) {
        $(editor.container).animate({ width: 300 });
    });

});

小提琴： http://jsfiddle.net/2t5ruscx/2

Ace编辑器 - 如何传递事件数据

2 个答案:

HTML

的Javascript