我有一个扩展/折叠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元素。
所以,这里有两个问题。
div
元素。任何想法? Ace编辑器API文档没有提供任何线索。
答案 0 :(得分:0)
在事件监听器中只有实验api用于获取事件目标。你可以做到
var myFocusHandler = function(event, editor) {
var theEditorDiv = jQuery(editor.container);
答案 1 :(得分:0)
Ace将编辑器对象公开为事件的第二个参数。您可以执行以下操作:
<h2>Editor 1</h2>
<pre class="editor"></pre>
<h2>Editor 2</h2>
<pre class="editor"></pre>
$('.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 });
});
});