我正在使用 Ace Editor 构建代码重放程序。我会存储您键入代码时按下的所有按键,然后在 Ace Editor 中重播它们。我已完成存储和重播所有键盘/鼠标输入,但在重播选项卡按下时遇到问题。
Ace Editor 处理文本区域 DOM 中的选项卡。按下 Tab 时文本区域的默认行为是移动到下一个 DOM,所以我知道他们正在使用 PreventDefault() 并使用自己的处理程序以允许 softTab(在之前插入 1、2、3 或 4 个空格)所有突出显示的文本)。
我的目标是让 Ace 编辑器触发 Tab 事件 - 这样 Ace 编辑器中当前突出显示的任何内容都将按正确的空格数进行 Tab 键切换。有谁知道如何做到这一点?
以下是我尝试过的选项以及它们不起作用的原因列表:
- 按 keydown 存储选项卡,然后计算列值并在该位置插入空格。但是 - 当你有一些文本半突出显示时,这会失败。正确的功能应该将整个单词移过来,但这只会在单词中间插入空格。
- 存储每当 editor.on('change', some_event_handler) 触发时按下的位置和按键,这给了我确切的输入内容和位置(非常适合重播),除了它不告诉我是否按下了 Tab 或空格键(它将触发和空格键都已处理)。另外,这仍然会在该位置插入空格(可能在单词中间,而不是移动单词),如数字 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.
- 尝试通过存储“/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);
此时,我开始考虑从头开始构建选项卡(如果选择多行,何时移动多个内容,移动多远,按下选项卡时如果单词半突出显示如何处理),但 Ace 显然已经按下选项卡时会执行此操作,所以我想触发按下选项卡。通常要触发选项卡按下,我只需执行以下操作:
// 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);
但这会导致没有任何行为结果。有什么建议么?