如何在ACE Editor装订线上添加(切换)断点

本文概述

• 1.启用断点切换
• 2.定义断点的样式

在集成开发环境会话中, 断点基本上是一个标记, 你可以定义该标记, 以指定当你的应用程序通过IDE的调试器运行时执行应在哪里停止。这些断点显然存储在IDE中, 而不是存储在代码本身中, 因此你可以在调试会话之间共享此类信息。 Ace编辑器是一个基于Web的代码编辑器组件, 你可以将其嵌入应用程序中以添加非常强大的” IDE”。这意味着, 你还可以按照一些步骤在Ace编辑器中添加断点。

在本文中, 我们将向你介绍如何使用JavaScript在Ace编辑器中轻松设置和删除断点。

1.启用断点切换

Ace编辑器通过setBreakpoint, clearBreakpoint和getBreakpoints方法提供了一种通过guttermousedown事件和当前编辑器会话处理断点的内部方法。你可以使用on方法轻松地将此事件附加到当前编辑器, 提供你要处理的事件的名称作为第一个参数, 并提供将要执行并接收该事件的回调作为第二个参数。基本上, 当用户单击装订线中的某个位置时, 将执行此回调, 在此回调内部, 你需要验证一些规则：

• 如果clicked元素不包含ace_gutter-cell类, 则不会发生任何事情, 因为clicked元素将不是一行, 因此也不会是断点。
• 如果当前的编辑器没有集中精力, 那么也不会发生任何事情。
• 如果装订线上的单击区域是数字之后的区域, 例如1、2、3, 则也不会发生任何事情。

在检查了先前的条件是否不成立之后, 你可以在同一事件中继续处理断点定位：

• 将当前会话断点存储到通过session.getBreakpoints方法获取它们的变量中。
• 存储当你在装订线内单击当前行时更新的当前行。
• 检查存储的断点中是否已注册当前行, 如果是, 则在此处应用的逻辑是在用户单击已定义的断点时删除该断点, 否则, 应将该断点添加到编辑器中。

以下逻辑描述了如何配置PHP模式下的简单初始化ace编辑器实例, 以通过上述事件和方法来处理断点逻辑：

// 1. Initialize ace editor
var editor = ace.edit("editor");

// 2. Initialize with a custom theme
editor.setTheme("ace/theme/monokai");

// 3. Predefine some highlight mode, in our case PHP
editor.getSession().setMode({
    path: "ace/mode/php", inline: true
});

// 4. Attach an event listener to handle when the user clicks on some row of the gutter
//    In this case, the breakpoint will be added in the clicked position of the document
editor.on("guttermousedown", function(e) {
    var target = e.domEvent.target;

    if (target.className.indexOf("ace_gutter-cell") == -1){
        return;
    }

    if (!editor.isFocused()){
        return; 
    }

    if (e.clientX > 25 + target.getBoundingClientRect().left){
        return;
    }

    var breakpoints = e.editor.session.getBreakpoints(row, 0);
    var row = e.getDocumentPosition().row;

    // If there's a breakpoint already defined, it should be removed, offering the toggle feature
    if(typeof breakpoints[row] === typeof undefined){
        e.editor.session.setBreakpoint(row);
    }else{
        e.editor.session.clearBreakpoint(row);
    }

    e.stop();
});

2.定义断点的样式

如果你已经测试了以前的JavaScript, 你将看到, 尽管没有异常抛出, 但是由于一切运行正常, 所以在编辑器中没有可见的断点, 就像在其他IDE中一样。发生这种情况是因为你尚未添加一些样式来定制ace_breakpoint。你可以使用以下CSS添加非常通用的代码：

.ace_gutter-cell.ace_breakpoint{ 
    border-radius: 20px 0px 0px 20px;
    /* Change the color of the breakpoint if you want */
    box-shadow: 0px 0px 1px 1px #248c46 inset; 
}

以下代码笔显示了使用断点的功能齐全的ACE编辑器, 因此在一些数字前单击装订线, 你将看到断点将使用绿色标记添加：

请参阅CodePen上带有我们代码世界(@ourcodeworld)的断点的Pen ACE编辑器。

显然, 你可以随意修改断点的样式并根据需要对其进行自定义, 添加一些特殊字符(例如•或其他字符)。

编码愉快！