javascript - 如何在 xterm.js 中创建链接

Question

我正在使用 xterm.js 编写一个报告工具，在 xterm.js 终端上显示结果。我希望将其中一些测试结果写入终端作为链接，按下这些链接后我可以触发某种 JavaScript 函数来处理下一步。我正在查看文档，发现一个名为 ILink 的接口(interface)，据说它可以实现我正在寻找的功能，但我不知道如何使用它。 xterm.js 可以做这样的事情吗？

Answer 1

自xterm.js#4005起支持OSC 8超链接

基于readme.md#addons

使用 xterm-addon-web-links

import { Terminal } from 'xterm';
import { WebLinksAddon } from 'xterm-addon-web-links';

const terminal = new Terminal();
term.open(document.getElementById('terminal'));

// clickable links
// default handler: open the link
terminal.loadAddon(new WebLinksAddon());
// custom handler
/*
function onLinkClick(_event, url) {
  console.log(`clicked link: ${url}`);
}
terminal.loadAddon(new WebLinksAddon(onLinkClick));
*/

// simple link
terminal.writeln('click here: https://xtermjs.org/');

// OSC 8 hyperlink escape codes
// not working in xterm.js?
terminal.writeln('click here: \x1b]8;;https://xtermjs.org\x07OSC 8 hyperlink text\x1b]8;;\x07');

替代方案:xterm-link-provider

import { Terminal } from 'xterm';
import { LinkProvider } from 'xterm-link-provider';

const terminal = new Terminal();
term.open(document.getElementById('terminal'));

const linkRegex = /(CLICKME)/gu
terminal.registerLinkProvider(
  new LinkProvider(
    terminal,
    linkRegex,
    (_event, text) => {
      console.log(text)
    }
  )
)

terminal.writeln('click here: CLICKME');