在浏览器中突出显示和编辑 XML答案

【问题标题】：Highlight and Edit XML in a browser在浏览器中突出显示和编辑 XML
【发布时间】：2013-06-07 16:10:48
【问题描述】：

试图在浏览器中为用户提供可编辑的 XML 页面。

例如，以下是 XML 的一部分。

<Employee name="John Doe" type="contract" ID="1000"> 
    <Salary>10000</Salary>  
    <Email>johndoe@johndoe.com</Email>  
</Employee>

当上述内容在浏览器（IE 或 FF）中呈现给用户时，用户应该能够突出显示属性或值。当突出显示并按下第二个鼠标按钮时，将弹出一个用于编辑的菜单。对于属性和标签，它可能类似于 ID-TEST-PRESENT 或 ID-TEST-OPTIONAL。现在，该属性应在选择时更改为 ID-TEST-PRESENT，而不是 ID。

同样，对于值，可以显示一个文本框，用户可以在其中输入新值。然后需要将这个更新的 XML 文件发送到后端并保存。

这可行吗？如果是，最简单的方法是什么。

我一直在编写嵌入式应用程序。这是我第一次涉足网络浏览器方面。任何帮助表示赞赏。

【问题讨论】：

另见stackoverflow.com/q/4833116/873282

标签： java javascript xml cross-browser

【解决方案1】：

这当然是可行的，但也不是微不足道的。至少对于不习惯 Javascript 和操作 DOM 的人来说不是这样。您必须解析 XML 并创建一个 HTML 文档，每个元素上都有 Javascript 事件侦听器。

您可以尝试使用现有组件并在必要时对其进行修改。我在这里发现了一个类似的问题：

https://stackoverflow.com/questions/378205/web-xml-editor-with-xml-syntax-highlighting

除非您正在处理通用 XML 文件，否则您最好只阅读 XML 并生成标准的 HTML 表单。最简单的方法是将所有内容都基于一个数据库，如果需要，该数据库将导出为 XML 到后端进程。这使得添加/编辑多行数据变得更加简单

【讨论】：

网址好像坏了。

【解决方案2】：

创建用于编辑特定 XML 词汇表中信息的界面的一种方法是使用 XForms。（我认为它是迄今为止最简单和最好的，但 YMMV。）给定适当的基础架构（见下文），将 XForms 用于您所描述的内容将涉及：

使用 XHTML + XForms 编写表单。为您希望用户能够编辑的 XML 部分指定编辑小部件；将 XML 的其他部分设为只读（或根本不显示它们）。定义您希望如何提交编辑的数据。使用 CSS 设置样式。
当用户打开表单时，XForms 处理器会自动加载 XML 文档并提供您在步骤 1 中指定的 XForm 中指定的编辑小部件。用户进行编辑。
当用户点击提交按钮时，浏览器将数据作为 XML 发送回服务器，服务器上的软件会执行必要的验证（这是来自开放网络的用户输入，您确实想检查一下）并对其进行适当处理。

如您所见，它比使用 AJAX 滚动您自己要简单一些（至少在您设置了基础架构之后）。

XForms 所需的基础设施部分取决于您使用的 XForms 实现。

对于基于客户端的 XForms 实现（例如 AgenceXML 的 XSLTForms 或 EMC 的 Formula），您需要 (a) 服务器上的软件副本（对于 XSLTForms，这意味着一个 XSLT 样式表，一个Javascript 库和一个 CSS 文件），(b) 可能是表单本身中的适当链接（需要如何完成此操作因实现而异），以及 (c) 愿意接受 PUT 请求的服务器。在某些情况下，(c) 是最难设置的，但任何提供 WebDAV 接口的服务器都可以，因此带有自动版本控制的 SVN、Apache（单独或在 Subversion 之上）和其他工具都可以用。

对于基于服务器的实现（例如 Orbeon Forms 或 BetterForm），您需要安装 XForms 实现并在您的 Web 服务器上运行它；由于它们通常是 servlet，因此您需要将它们放入 servlet 引擎中。通常，它们会附带某种形式的 WebDAV 服务器。

W3C 和 CWI 的 Steven Pemberton 写了一篇很有帮助的 tutorial introduction to XForms；我维护了一个list of pointers 和其他可能有用的 XForms 相关材料。

【讨论】：

发帖时请尽量避免使用YMMV等短格式

【解决方案3】：

为了做到这一点，你需要做很多工作。要进行通用编辑，您需要以下内容

后端的 XML 解析器将 XML 文件解析为 2 种格式 (A) 转换为前端所需的 HTML 格式。 (B) 转换成所需的后端格式。这很棘手，需要一些思考。蛮力方法很简单，但效率很低。
设置与您的脚本的 AJAX 连接，该连接可以获取和识别部分 XML。为此，您将需要一些机制来识别零件...可能是通过 HTML 传递的 ID。
AJAX 接口应该更新数据库/文件并执行必要的操作。

这是一个简单的布局。它需要做很多工作。做一些研究

项目

【讨论】：

【解决方案4】：

codemirror 似乎是最好的一个
jquery.xmleditor 可能是您正在寻找的。它们提供了用于编辑 XML 的图形 UI。对于基于文本的 XML 编辑器，它们依赖于Cloud9 编辑器。请注意，Cloud9 已获得 GPL 许可。
LiveXMLEdit 更像是一个探险家式的编辑器，但也许它也有帮助
AXEL 是一个用于创建基于文档模板的 XML 创作应用程序的库。

【讨论】：