Highlight and Edit XML in a browser

问题:

Trying to provide a user with editable XML page in a browser.

For example, the following is part of an XML.

<Employee name="John Doe" type="contract" ID="1000"> 
    <Salary>10000</Salary>  
    <Email>[e-mail]</Email>  
</Employee>

When the above is presented to the user in a brower (either IE or FF), the user should be able to highlight an attribute or the value. When highlighted and the second mouse button is pressed, this would pop up a menu for editing. For attributes and tags, it could be something like ID-TEST-PRESENT or ID-TEST-OPTIONAL. Now instead of ID, the attribute should change to ID-TEST-PRESENT when selected.

Likewise, for values, a text box can be presented, where the user can enter a new value. Then this updated XML file needs to be sent to the back end and saved.

Is this doable? If yes, what would be the easiest way.

I have always written embedded applications. This is my first foray on the web browser side. Any help is appreciated.

回答1:

It is doable of course, but it's not trivial. At least not for someone who is not used to Javascript and manipulating the DOM. You would have to parse the XML and create a HTML document with Javascript event listeners on each element.

You could try and use an existing component and modify it if necessary. I found a similar question here:

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

Unless you are dealing with generic XML files, you are probably better off just reading the XML and generate a standard HTML form. The simplest way would be to base everything on a database that will export to XML to the backend processes if needed. This makes it much simpler to add/edit multiple rows of data

回答2:

One way to to create an interface for editing information in a particular XML vocabulary is to use XForms. (I think it is by far the easiest and best, but YMMV.) Given an appropriate infrastructure (see below), using XForms for what you describe would involve:

1. Write a form, using XHTML + XForms. Specify editing widgets for the parts of the XML you want the user to be able to edit; make other parts of the XML read-only (or don't display them at all). Define how you want the edited data to be submitted. Style using CSS.
2. When the user opens the form, the XForms processor loads the XML document automatically and provides editing widgets as specified in the XForm you specified in step 1. The user edits.
3. When the user clicks on the submit button, the browser sends the data back to the server as XML, and software on the server performs the necessary validations (this is user input from the open web, you do want to check it) and processes it appropriately.

As you can see, it's a little simpler than rolling your own using AJAX (at least once you have the infrastructure set up).

What infrastructure is necessary for XForms depends in part on which XForms implementation you are using.

For client-based implementations of XForms (such as XSLTForms from AgenceXML, or Formula from EMC), you need (a) a copy of the software on your server (in the case of XSLTForms, this means one XSLT stylesheet, one Javascript library, and one CSS file), (b) possibly an appropriate link in the form itself (how this needs to be done varies with the implementation), and (c) a server willing to accept PUT requests. In some contexts, it will be (c) that is the hardest to get set up, but any server that provides a WebDAV interface will do, so SVN with auto-versioning, Apache (alone or on top of Subversion), and other tools can all be used.

For server-based implementations (such as Orbeon Forms or BetterForm), you need to install the XForms implementation and run it on your Web server; since they are typically servlets, you will need to put them in a servlet engine. In general, they will ship with some form of WebDAV server included.

Steven Pemberton of W3C and CWI has written a helpful tutorial introduction to XForms; I maintain a list of pointers to that and to other XForms-related materials that may also be helpful.

回答3:

In order to do this you would need to work a lot. To do generic editing you would need the following

1. XML parser at back end to parse XML file to 2 formats (A) To convert to the required HTML format for front end. (B) To convert into a required backend format. This is tricky and requires some thought. A brute force method is easy but very inefficient.
2. Setup an AJAX connection to your script which can take and recognize parts of the XML. For this you will need some mechanism to identify the part... may be an ID passed though HTML.
3. The interface for AJAX should the update the Database/file and do the needful.

This is a simple layout. It needs a lot of work to be done. Do some research

item

回答4:

• codemirror seems to be the best one
• The jquery.xmleditor might be what you are looking for. They offer a graphical UI for editing XML. For the text-based XML editor, they rely on the Cloud9 editor. Be aware that Cloud9 is GPL licensed.
• LiveXMLEdit is more an explorer-like editor, but maybe it helps, too
• AXEL is a library for creating XML authoring applications based on document templates.