Ace编辑器（javascript）：触发Ace Editors事件处理程序的标签按钮事件（不只是插入'/ t'或空格） [英] Ace Editor (javascript): Triggering a tab press event for Ace Editors event handlers (not just inserting '/t' or spaces)

问题描述

我正在使用Ace Editor来构建代码重放程序。当您键入代码时，我存储所有按下的键，然后在Ace Editor中重播它们。我已经完成了所有键盘/鼠标输入的存储和重放，但是在播放标签页时出现问题。

Ace编辑器处理textarea DOM中的选项卡。按Tab键时textarea的默认行为是移动到下一个DOM，所以我知道他们正在使用preventDefault（）并使用自己的处理程序来允许softTab（之前插入1,2,3或4个空格所有突出显示的文本）。

我的目标是使Ace编辑器触发标签事件 - 这样Ace编辑器中当前突出显示的任何内容都标签在正确数量空间。有没有人知道如何做到这一点？

以下是我尝试过的选项列表，为什么它们不起作用：

1. 存储选项卡按下键盘，然后计算列值，并在该位置插入空格。但是 - 当您将一些文本突出显示时，这将失败。正确的功能应该是将整个单词移开，但这只会在单词的中间插入空格。


2. 存储每当editor.on（'change'，some_event_handler ），它给了我正确的输入和位置（完美的重放），除了它不告诉我是否选项卡或空格键被按下（它将触发两者，空格键已被处理）。此外，仍然在位置（可能在一个单词的中间，而不是移动单词）中插入空格，如1号。

例如：

  editor.getSession（）。on（'change'，function（e）{
 if ）{
 var text = e.data.text; 
 if（text =='|| text ==''|| text ==''|| text ==''）{
 // FAILS，因为它不知道它的空间或单个空格标签
  

1. 尝试欺骗Ace编辑器通过存储'/ t'并将其插入到ace编辑器中来触发标签。

例如（存储代码）：

  function keypress_handler（e）{
 var key = e.which ; 
 var text = String.fromCharCode（key）; 
 switch（key）{
 case 9：// Tab 
 text ='\t'; //手动添加tab 
 //存储此事件的代码以便稍后重播b $ b break; 
} 
  

例如（重播代码）：

  //假设光标/选择位于正确的位置
 editor.insert（log.text）; 
  

在这一点上，我开始考虑从头开始构建选项卡选择多行，移动有多远，如果一个单词在按Tab时被突出显示，那么如何处理），但是当按下Tab时，Ace显然已经这样做了，所以我只想触发Tab键。通常会触发一个标签按钮，我只需要执行以下操作：

  //使用jQuery触发Ace Editor的人工Tab Keydown事件
 var tab_press = $ .Event（'keydown'）; 
 tab_press = 9; // Tab keycode 
 $（'。editor'）。trigger（tab_press）; 
  

但这会导致结果没有任何行为。任何建议？

解决方案

我在这里阅读源代码：

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 ）; 
  

如何令人难以置信的简单 - 希望有一些文档，这样可以节省很多时间。

I am using Ace Editor to build a code replay program. I store all the keys pressed when you type code, and then I replay them in Ace Editor. I have finished storing and replaying all keyboard/mouse input, but am having issues replaying tab presses.

Ace Editor handles tabs within a textarea DOM. The default behavior for a textarea when tab is pressed is to move to the next DOM, so I know they are using preventDefault() and using their own handler in order to allow softTab (insertion of 1,2,3, or 4 spaces before all highlighted text).

My goal is to cause Ace editor to trigger the tab event - such that whatever is currently highlighted in the Ace editor is tabbed over the correct number of spaces. Does anyone know how to do this?

Here are a list of options I've tried and why they don't work:

1. Store tab presses on keydown and then calculate the column value and insert the spaces in that location. BUT - this fails when you have some text half highlighted. The correct functionality should shift the entire word over, but this would just insert spaces in the middle of the word.
2. Store the location and keys pressed whenever editor.on('change', some_event_handler) fires, which gives me exactly what was input and the location (perfect for replay) except it doesnt tell me whether tab or spacebar was pressed (it will fire for both and spacebar is already handled). Plus this still inserts spaces at the location (potentially in middle of a word instead of shifting word over) as in number 1.

For example:

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. Try to trick Ace Editor to trigger a tab by storing '/t' and inserting it into the ace Editor.

For example (storage code):

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

For example (replay code):

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

At this point, I was beginning to think about building tab from scratch (when to shift multiple things if multiple lines are selected, how far to shift, how to handle if a word is half highlighted when tab is pressed), but Ace clearly already does this when tab is pressed, so I would like to just trigger the tab press. Normally to trigger a tab press, I'd simply do:

// 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);

But this causes results in no behavior. Any suggestions?

解决方案

I read through the source code here:

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

And found the following snippet of code:

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

Thus, to trigger a tab (that works in all cases), simply call:

editor.indent();

How incredibly simple - wish there was some documentation out there for this so that many hours could have been spared.

这篇关于Ace编辑器（javascript）：触发Ace Editors事件处理程序的标签按钮事件（不只是插入'/ t'或空格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！