如何在上传前对XML进行语法高亮和格式化 CodeMirror/Monaco Editor

CodeMirror 6 的 @codemirror/lang-xml 仅支持语法高亮，不提供自动缩进或美化功能；需集成 xml-formatter 等工具并在用户触发时调用，同时上传前必须用 DOMParser 校验 XML 合法性。

为什么不能直接用 CodeMirror 6 的 XML 模式做格式化

CodeMirror 6 自带的 @codemirror/lang-xml 只负责语法高亮，不提供自动缩进或美化功能。它识别标签、属性、注释，但不会重排换行或补全缩进——你粘贴一段压缩的 XML（比如 text），编辑器默认显示为单行，且无自动格式化入口。

要实现“上传前格式化”，得额外集成 XML 格式化工具，并在用户触发动作（如点击上传按钮、失焦、或 Ctrl+Shift+F）时调用它。

用 xml-formatter + CodeMirror 6 实现一键美化

xml-formatter 是轻量、无依赖、支持缩进/空格/换行控制的纯 js 库，适配浏览器环境，和 CodeMirror 6 配合最直接。

• 安装：npm install xml-formatter
• 导入后，在用户操作时机调用：

  import { format } from 'xml-formatter'; const formatted = format(editor.state.doc.toString(), {   indentation: '  ',   collapseContent: true,   lineSeparator: 'n' });

• 写回编辑器：

  editor.dispatch({   changes: { from: 0, to: editor.state.doc.length, insert: formatted } });

• 注意：若 XML 有语法错误（如未闭合标签），format() 会抛出 Error: Parse error，必须 try/catch 并提示用户修正

• 先确保 Monaco 加载了 XML 语言支持：monaco.languages.register({ id: 'xml' });
• 注册格式化提供者（仅客户端，不校验语法）：

  monaco.languages.registerDocumentFormattingEditProvider('xml', {   provideDocumentFormattingEdits(model, options) {     try {       const formatted = format(model.getValue(), {         indentation: options.insertSpaces ? ' '.repeat(options.tabSize) : 't',         lineSeparator: 'n'       });       return [{         range: model.getFullModelRange(),         text: formatted       }];     } catch (e) {       // 不吞错：Monaco 会静默忽略返回空数组，所以这里最好弹个提示       console.warn('XML 格式化失败：', e.message);       return [];     }   } });

• 之后用户按 Shift+Alt+F 或右键 → “Format Document” 就能触发

上传前校验 XML 合法性比高亮更重要

高亮和格式化都是锦上添花，但上传失败往往卡在解析阶段。别只依赖前端美化，务必在提交前做基础合法性检查：

• 用原生 DOMParser 快速验证（兼容所有现代浏览器）：

  function isValidXML(str) {   try {     new DOMParser().parseFromString(str, 'application/xml');     return !document.querySelector('parsererror');   } catch {     return false;   } }

• 如果返回 false，说明有严重结构错误（如乱码、未闭合、非法字符），此时不应允许上传，也不该尝试格式化——因为 xml-formatter 同样会失败
• 注意：IE 已淘汰，无需兼容其 ActiveXObject("microsoft.XMLDOM")

真正容易被忽略的是：格式化函数和校验函数都对 bom、、非 UTF-8 编码敏感。如果用户从 windows 记事本复制内容，可能带 BOM 或 rn 混用，建议在 format() 前先 .replace(/rn/g, 'n') 统一换行符。