xterm-addon-web-links使用

发表于 更新于 本文字数： 679 阅读时长 ≈ 1 分钟
本文介绍如何使用xterm-addon-web-links插件在xterm.js终端中实现链接识别和点击功能,包括保持焦点在原标签页、Mac下使用Command键而非Control键,以及hover时的提示等实现细节,以提高xterm.js终端的链接交互体验。

xterm.js下终端内容实现链接识别并可点击可使用xterm-addon-web-links插件，配置方面，但还是有些细节问题。这里Mark下

焦点保持原标签页

1
2
3
4
5
6
term.loadAddon(new WebLinksAddon.WebLinksAddon(
       (event, uri) => {
          if (isMac ? event.metaKey : event.ctrlKey) {
             window.open(uri);
          }
       }));

浏览器针对链接点击有两种行为

  1. LeftClick是直接打开新标签页，焦点聚焦新页面
  2. MetaKey+LeftClick是打开新标签页，但焦点还是原页面
    • Mac下⌘
    • Windows下Ctrl

我这里因为需求是不希望点击链接焦点丢失，因此只能在点击事件这里增加metaKey判断来确保用户点击触发时焦点不丢失

Mac下可以使用ctrl而不是meta吗

Ctrl+LeftClick在Mac下行为等价于RightClick即右键菜单，因此不可以

hover时候给出提示

假如用户并不知道⌘+LeftClick点击链接，为此可以在hover捕捉到链接时给提示信息。

1
2
3
4
5
{
      hover: (event, text, location) => {
        console.log(event, text, location);
      }
    }

WebLinksAddon第二个参数为配置参数，其中有hover回调函数，event中可以拿到光标的位置信息，因此可以利用位置信息做个tooltip展示之类的

写在最后

over