JSONEditor是否具备获取光标位置JSON块的默认功能？如何提取内容？

JSONEditor本身没有直接提供从光标位置提取对应JSON块的默认函数，但可以借助它底层依赖的Ace编辑器API实现该需求，具体步骤如下：

实现思路与步骤 #

• 获取Ace编辑器实例：JSONEditor的代码编辑模式基于Ace构建，可通过jsonEditor.editor拿到Ace实例（需确保当前处于代码模式）。
• 定位括号匹配范围：利用Ace内置的括号匹配功能，通过editor.session.getMatching()获取光标所在位置对应的开闭括号起止坐标。
• 提取并解析JSON块：根据坐标提取文本内容，再用JSON.parse()解析为合法JSON对象。

示例代码 #

// 假设已初始化JSONEditor实例：const jsonEditor = new JSONEditor(container, options);

// 仅在代码模式下执行
if (jsonEditor.getMode() === 'code') {
  const aceEditor = jsonEditor.editor;
  const cursorPos = aceEditor.getCursorPosition();
  
  // 获取匹配的括号位置
  const matchingRange = aceEditor.session.getMatching(cursorPos.row, cursorPos.column);
  
  if (matchingRange) {
    const start = matchingRange.start;
    const end = matchingRange.end;
    
    // 提取对应JSON块文本
    const jsonText = aceEditor.session.getTextRange({
      start: {row: start.row, column: start.column},
      end: {row: end.row, column: end.column + 1} // +1确保包含闭合括号
    });
    
    try {
      // 解析为JSON对象
      const targetJson = JSON.parse(jsonText);
      console.log('提取到的JSON块:', targetJson);
      // 此处可添加业务逻辑处理
    } catch (err) {
      console.error('提取文本不是有效JSON:', err);
    }
  } else {
    console.log('光标位置不在合法的JSON块括号内');
  }
}

额外说明 #

• 若使用树状视图模式，可通过jsonEditor.getSelection()获取选中节点，再结合节点路径从完整JSON中提取对应数据。
• 需确保光标处于合法的JSON对象/数组块内，否则getMatching()会返回null，需做好异常处理。

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