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

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

一旦编辑器获得焦点，我需要触发“扩展”。所以我是这样做的：

var editor = ace.edit("theeditor");
editor.on("focus", 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");
}

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

而

myFocusHandler

看起来像这样：

var editor = ace.edit("theeditor");
editor.on("focus", 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");
}

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

到目前为止还不错。当我不得不重构代码以支持同一网页中的多个ace编辑器时，问题就开始了。使用jQuery，我可以使用事件处理程序中的

this

获取当前编辑器，然后使用jQuery DOM遍历函数获取与其相关的按钮。如何使用Ace将该操作（或将事件数据传递到事件处理程序中）？我想这样做：

var editor = ace.edit("theeditor");
editor.on("focus", 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");
}

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编辑器对象的引用

如何获取ace编辑器内置的

div

元素

---

有什么想法吗？Ace编辑器API文档对此没有任何线索。

只有用于在事件侦听器中获取事件目标的实验API。你能行

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

---

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

HTML 小提琴：