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

时间:2014-10-31 18:27:42

标签: javascript jquery ace-editor

我有一个扩展/折叠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元素。

所以,这里有两个问题。

  1. 如何在事件处理程序
  2. 中获取对ace编辑器对象的引用
  3. 如何获取内置ace编辑器的div元素。
  4. 任何想法? Ace编辑器API文档没有提供任何线索。

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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