Monaco Editor检测JSON Schema校验错误并阻止内容变更触发的方法咨询

核心实现思路 #

你可以通过Monaco原生提供的校验标记查询API实现需求，不需要额外依赖第三方工具，具体逻辑如下：

• Monaco的所有语法、Schema校验结果都会以Marker的形式存在于对应编辑器模型中，JSON Schema校验产生的标记统一归属json分类，可直接调用公开API读取
• 由于Schema校验是异步执行的，内容变更后不能立即检测错误，需要加短时间防抖等待校验完成
• 检测到存在错误级别的标记时，跳过原本的内容变更通知逻辑即可

可直接复用的代码示例 #

// 防抖定时器，避免内容输入过程中频繁触发校验
let validateTimer = null;

editor.onDidChangeModelContent(() => {
  // 清理上一次未执行的校验任务
  if (validateTimer) clearTimeout(validateTimer);

  validateTimer = setTimeout(() => {
    const currentModel = editor.getModel();
    if (!currentModel) return;

    // 读取当前模型的所有JSON校验标记
    const jsonMarkers = monaco.editor.getModelMarkers({
      owner: 'json',
      resource: currentModel.uri
    });

    // 过滤出错误级别的校验结果（如果允许警告通过可以调整判断条件）
    const hasSchemaError = jsonMarkers.some(marker => {
      return marker.severity === monaco.MarkerSeverity.Error;
    });

    // 无校验错误时才触发内容变更通知
    if (!hasSchemaError) {
      // 此处替换为你原本的内容变更通知逻辑
      console.log('内容校验通过，触发变更通知：', currentModel.getValue());
    }
  }, 250); // 防抖时长可根据实际场景调整，200-300ms是通用适配值
})

注意事项 #

• Marker的严重等级从高到低为Error> Warning> Info> Hint，可根据业务需求调整过滤规则
• 多编辑器实例场景下，需要将防抖定时器和对应实例绑定，避免多实例之间的逻辑冲突
• 所有调用的API均为Monaco公开的稳定接口，不会随版本迭代出现不可用问题

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