如何在编辑器中插入可触发操作的格式化超链接？

核心实现思路 #

Monaco Editor不原生支持直接嵌入HTML超链接，但可以通过**文本装饰器（Text Decorations）**模拟超链接样式，再结合点击事件监听实现自定义交互逻辑（比如打开文件对话框）。

具体实现步骤 #

1. 插入超链接标记文本 #

先在编辑器中插入一段用于标识超链接的文本，复用你现有的插入逻辑并扩展：

const insertInteractiveLink = () => {
  const line = editor.getPosition();
  if (!line) {
    throw new Error('line is null');
  }
  const range = new monaco.Range(line.lineNumber, 1, line.lineNumber, 1);
  const linkText = "[选择文件]"; // 超链接显示文本
  const op: monaco.editor.IIdentifiedSingleEditOperation = {
    range: range,
    text: linkText,
    forceMoveMarkers: true
  };
  editor.executeEdits('my-source', [op]);
  
  // 插入文本后立即创建超链接装饰器
  createLinkDecoration(line.lineNumber, linkText.length);
};

2. 添加超链接样式装饰器 #

用editor.deltaDecorations给插入的文本添加超链接样式（蓝色、下划线、悬停指针）：

let linkDecorationIds: string[] = []; // 保存装饰器ID，方便后续更新/移除

const createLinkDecoration = (lineNum: number, textLength: number) => {
  // 先清除旧装饰器（如果存在）
  if (linkDecorationIds.length > 0) {
    editor.deltaDecorations(linkDecorationIds, []);
  }

  const targetRange = new monaco.Range(lineNum, 1, lineNum, 1 + textLength);
  linkDecorationIds = editor.deltaDecorations([], [{
    range: targetRange,
    options: {
      inlineClassName: 'monaco-custom-link', // 自定义CSS类
      hoverMessage: { value: '点击打开文件选择框' } // 悬停提示文本
    }
  }]);
};

然后在页面中添加对应的CSS样式：

.monaco-custom-link {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

3. 监听点击事件触发自定义操作 #

通过编辑器的mouseDown事件，判断点击位置是否在超链接装饰器范围内，执行打开文件对话框的逻辑：

editor.onMouseDown((event) => {
  const target = event.target;
  // 检查点击对象是文本内容
  if (target.type === monaco.editor.MouseTargetType.CONTENT_TEXT) {
    const clickPosition = target.position;
    // 获取点击位置范围内的所有装饰器
    const decorations = editor.getDecorationsInRange(
      new monaco.Range(clickPosition.lineNumber, clickPosition.column, clickPosition.lineNumber, clickPosition.column)
    );
    // 判断是否是我们定义的超链接装饰器
    const isLinkClicked = decorations.some(deco => deco.options.inlineClassName === 'monaco-custom-link');
    if (isLinkClicked) {
      event.preventDefault(); // 阻止默认编辑行为
      // 触发文件选择对话框
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.onchange = (e) => {
        const selectedFiles = (e.target as HTMLInputElement).files;
        if (selectedFiles?.length) {
          // 这里可以处理选中的文件，比如获取路径、读取内容等
          console.log('选中文件:', selectedFiles[0]);
        }
      };
      fileInput.click();
    }
  }
});

关键说明 #

• 装饰器仅做样式渲染，底层还是普通文本，所以需要通过事件监听判断点击位置
• 如果需要动态修改超链接的文本或位置，可通过deltaDecorations更新装饰器范围
• 悬停提示能提升用户感知，可根据需求自定义提示内容

内容的提问来源于stack exchange，提问作者Jack