Ace Editor (javascript):触发 Ace Editors 事件处理程序的选项卡按下事件(不仅仅是插入“/t”或空格)

2024-01-28

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

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

我的目标是让 Ace 编辑器触发 Tab 事件 - 这样 Ace 编辑器中当前突出显示的任何内容都将按正确的空格数进行 Tab 键切换。有谁知道如何做到这一点?

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

  1. 按 keydown 存储选项卡,然后计算列值并在该位置插入空格。但是 - 当你有一些文本半突出显示时,这会失败。正确的功能应该将整个单词移过来,但这只会在单词中间插入空格。
  2. 存储每当 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.
  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);

此时,我开始考虑从头开始构建选项卡(如果选择多行,何时移动多个内容,移动多远,按下选项卡时如果单词半突出显示如何处理),但 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);

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


我在这里阅读了源代码:

https://github.com/ajaxorg/ace/blob/master/lib/ace/commands/default_commands.js 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();

多么简单得令人难以置信——希望有一些相关的文档,这样就可以节省很多时间。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ace Editor (javascript):触发 Ace Editors 事件处理程序的选项卡按下事件(不仅仅是插入“/t”或空格) 的相关文章

  • Javascript/jQuery 变量未给出预期值

    和我之前的其他人一样 我也在 Javascript 的范围内苦苦挣扎 那并试图阅读该死的东西 我已经检查了关于这个问题的一些先前的线程 但我似乎无法让它们正确地应用于我的问题 在下面的示例中 我想操纵中的值tagsArr数组 一旦数组已完全
  • Google 地图上的自定义路线/路径/道路

    我需要能够使用 V2 或 V3 最好是 3 创建在某种意义上忽略建筑物的路径 我试图创建一个 kml 文件来自己绘制所有路径 然后找到某种方法根据需要打开 关闭它们 例如 用户想要从 A 点前往 B 点 这些点之间有许多建筑物 用户可以实际
  • “过滤”JSON 以获得唯一键并获取所有相关值

    找到一个组中所有可能的相关值的最佳方法是什么 var table group a stuff new group a stuff old group b stuff newOld group b stuff old group c stuf
  • 如何检查变量是否是生成器函数? (例如函数*产量)[重复]

    这个问题在这里已经有答案了 检查函数是否是生成器的可靠方法是什么 例如 let fn function yield 100 if fn instanceof for let value in fn 我能想到的唯一方法是fn toString
  • 如何抑制 IE9 window.close() 确认消息

    应用 window close 函数后 IE9 会引发 您正在查看的网页正在尝试关闭 消息 有没有办法在不更改应用程序代码的情况下 而是通过更改一些特定于 IE 的注册表项来抑制此消息 如果窗口不是由脚本打开的 IE 不允许在没有确认的情况
  • 无法读取未定义错误的属性“匹配”

    我试图在 React JS 前端显示一些文本来代替个人资料图像 当它不可用时 基本上 我将当前客户名称传递给一个函数 该函数提取名称中所有单词的第一个字符 我能够仅显示名称 但是当我执行函数调用时 出现 无法读取未定义的属性 匹配 错误 并
  • 如何隐藏 URL 中的 ID

    我以前在 Stack Overflow 上见过这类问题 但没有一个真正有帮助 我也用谷歌搜索过 但没有骰子 我想知道如果用户单击选项卡本身是否可以隐藏 URL 中的 ID 这是网页 www planet nu dev new experia
  • 如何在 Angular 模板中嵌入 GitHub gist?

    角度忽略script其模板中包含标签 但加载 GitHub gist 需要它们 执行此操作的最佳做 法是什么 使用iframe 创造script动态标记 或者是其他东西 一种方法是创建一个iframe with script里面并在你希望你
  • 如何在给定目标索引数组的情况下对数组进行就地排序?

    你如何对给定的数组进行排序arr in place给定目标索引数组ind 例如 var arr A B C D E F var ind 4 0 5 2 1 3 rearrange arr ind console log arr gt B E
  • 如何用方向键移动div

    我想使用 jQuery 用箭头键移动 div 所以右 左 下 上 找到了我想要完成的演示here http atomicrobotdesign com blog htmlcss move objects around the canvas
  • 使用 jQuery animate 时,有没有办法隐藏 webkit 浏览器中显示的工件?

    我正在使用 jQuery animate 在网页上的项目中滑动 由于某种原因 只有在 webkit 浏览器中 元素动画的空间中才会出现伪影痕迹 有没有办法阻止或隐藏这种情况 一旦您加载此处的页面 它们就会出现在轮播上 http www my
  • 如何使用jsPDF设置图像以适合页面宽度?

    有什么办法可以解决这个问题吗 我尝试以毫米为单位设置宽度和高度 如何将其设置为全角 您可以获取 PDF 文档的宽度和高度 如下所示 var doc new jsPDF p mm a4 var width doc internal pageS
  • EmberJS:如何为 ember-data RESTAdapter 中的模型提供特定的 URL?

    问题一 如果我有一个名为 Company 的余烬数据模型 我如何告诉它点击 businesses and businesses id而是检索记录 有没有办法指定给定模型的 url 更好的是 像 BackboneJS 一样 我可以在运行时计算
  • 如何使用 javascript 禁用组合键?

    I would like to disable view source shortcut key for IE using JavaScript To disable Ctrl C I am using the following func
  • jQuery 更改为隐藏字段后触发重力表单中的表单更新

    简而言之 是否有 JavaScript 函数或挂钩来触发重力形式的更新 以便执行条件逻辑 原问题 我正在使用重力形式 并且创建了一个 变化时 事件 gform 1 find gfield date dropdown month select
  • Kotlin JavaScript 到 TypeScript 定义文件

    我已经找到了ts2kt 库 https github com Kotlin ts2kt这将从任意位置创建 Kotlin 头文件 d ts文件 但是 我想朝相反的方向走 我想构建一个可以编译为 JavaScript 的 Kotlin 库 但我
  • 图像未显示在从 HTML 创建的 PDF 上

    我想动态创建 PDF 这意味着我将从 Google Drive 获取文件 然后将它们放入 HTML 代码中 并尝试从中创建 PDF 一切工作正常 除了图像没有显示 我现在正在做的是 从 HTML 字符串创建 HtmlOutput 获取该 H
  • 如何始终将焦点保持在画布上?

    我一直在这个论坛寻找解决方案 但尚未找到 无论我在页面上的哪个位置单击 我都需要始终将焦点放在画布元素上 我有几个按钮 在每个 onclick 事件中我写 document getElementById canvas focus 这确实有效
  • 使用 JQueryUI Autocomplete 和 Meteor 的规范方法

    使用 Meteor 我想了解使用 JQuery UI 自动完成处理大量服务器端数据的最有效方法 我有两个工作提案 想听听关于差异的意见 以及是否有更好的方法来做同样的事情 使用发布 订阅 Server Meteor publish auto
  • 在哪里放置资源特定逻辑

    您能帮我考虑在 AngularJS 中将资源 服务 特定的业务逻辑放置在哪里吗 我觉得在我的资源上创建一些类似模型的抽象应该很棒 但我不确定如何做 API调用 gt GET customers 1 lt first name John la

随机推荐