javascript - Ace 编辑器 (javascript) : Triggering a tab press event for Ace Editors event handlers (not just inserting '/t' or spaces)

Question

我正在使用 Ace Editor 构建代码重放程序。当您键入代码时，我会存储所有按下的键，然后在 Ace Editor 中重播它们。我已完成存储和重放所有键盘/鼠标输入，但在重放 Tab 键时遇到问题。

Ace Editor 处理文本区域 DOM 中的选项卡。按下 tab 时文本区域的默认行为是移动到下一个 DOM，所以我知道他们正在使用 preventDefault() 并使用他们自己的处理程序以允许 softTab(在前面插入 1、2、3 或 4 个空格所有突出显示的文本)。

我的目标是让 Ace 编辑器触发制表符事件 - 这样 Ace 编辑器中当前突出显示的任何内容都会在正确数量的空格上制表。有谁知道如何做到这一点？

以下是我尝试过的选项列表以及它们不起作用的原因:

1. Store 选项卡按下 keydown，然后计算列值并在该位置插入空格。但是 - 当您有一些文本突出显示时，这会失败。正确的功能应该是将整个单词移动过来，但这只会在单词的中间插入空格。
2. 每当 editor.on('change', some_event_handler) 触发时存储位置和按下的键，这会准确地告诉我输入的内容和位置(非常适合重播)除了它不告诉我是否按下了制表符或空格键(它将为两者都触发并且空格键已经被处理)。另外，这仍然会像数字 1 那样在该位置插入空格(可能在单词的中间而不是移动单词)。

例如:

editor.getSession().on('change', function(e) {
    if (handlers) {
        var text = e.data.text;
        if (text == ' ' || text == '  ' || text == '   ' || text == '    ') {
           //FAILS because it doesn't know if its space or a single space tab.

1. 尝试通过存储“/t”并将其插入到 ace 编辑器中来欺骗 Ace 编辑器触发选项卡。

例如(存储代码):

function keypress_handler(e) {
    var key = e.which;
    var text = String.fromCharCode(key);
    switch(key) {
        case 9: //Tab
            text = '\t'; // manually add tab
            //Code to store this event for replay later
            break;        
    }

例如(重放代码):

// Assuming the cursor/selection is in the correct position
editor.insert(log.text);

在这一点上，我开始考虑从头开始构建标签(如果选择多行，何时移动多个东西，移动多远，如果按下标签时单词半突出显示如何处理)，但是当按下 tab 时，Ace 显然已经这样做了，所以我只想触发 tab 按下。通常要触发标签按下，我会简单地做:

// trigger an artificial Tab Keydown event for Ace Editor using jQuery
var tab_press= $.Event('keydown');
tab_press = 9; // Tab keycode
$('.editor').trigger(tab_press);

但这会导致没有任何行为。有什么建议吗？

Answer 1

我在这里通读了源代码:

https://github.com/ajaxorg/ace/blob/master/lib/ace/commands/default_commands.js

并找到了下面的代码片段:

{
    name: "indent",
    bindKey: bindKey("Tab", "Tab"),
    exec: function(editor) { editor.indent(); },
    multiSelectAction: "forEach",
    scrollIntoView: "selectionPart"
}

因此，要触发一个选项卡(适用于所有情况)，只需调用:

editor.indent();

多么简单 - 希望有一些相关的文档，这样就可以节省很多时间。