jquery.xmleditor

A web browser based XML editor. It provides a general use graphical tool for creating new or modifying existing XML documents in your web browser. Information is extracted from an XML schema (XSD file) to provide the user with information about what elements, subelements and attributes are available at different points in the structure, and a GUI based means of adding or removing them from the document.

Additionally, this project includes a tool for generating JSON objects from XML schemas, which can either be directly used in browsers or precompiled (see xsd/xsd2json.js).

Try it out in our jquery.xmleditor demo page using the MODS 3.4 schema.

And here's a demo starting from an existing xml file

This project was developed as a part of the Carolina Digital Repository for use in our administrative tools, but is fully functional as a standalone client. This tool is intended to serve as a general schema driven XML editor that runs in web browsers, although some default behaviors are oriented towards it.
For our own usage, it retrieves and submits documents to a SWORD 2.0 enabled repository.

Browse support

The editor should work in current versions of Chrome, Firefox, Safari, Opera, and IE9-10. Performance will vary. IE7-8 are mostly functional, although not all features work.

Features

• Graphical editor mode for displaying and modifying XML elements
• Text editor mode for directly modifying the underlying document (using the Cloud9 editor)
• Contextual, schema driven menus for adding new elements, subelements and attributes in both the graphical and text editing modes
• Fully javascript and CSS based, jquery widget
• AJAX submission of document modifications
• Export the document to a file in web browsers that support it
• Keyboard shortcuts for navigation and other operations
• Standalone tool for building JSON representations of XML schemas (see the xsd/ folder in this project)

How to use

Locating schema files

Due to restrictions web browsers have on cross domain requests in javascript, all necessary XSD files must be located in the same domain as the page the editor is embedded in.
But rather than lugging the XSD files around everywhere, you can precompile a JSON representation of your schemas to include instead.
It'll also save your users some loading time.

Embedding the editor

<div id="xml_editor"><root></root></div>
<script>
  $(function() {
		$("#xml_editor").xmlEditor({
                schema: schema
        });
  });
</script>

Generate and use the schema object at run-time instead of precompiling

See the runtime schema generation demo

<script>
  $(function() {
        var extractor = new Xsd2Json("mods-3-4.xsd", {"schemaURI":"mods-3-4/", "rootElement": "mods"});

        $("#mods_editor").xmlEditor({
                schema: extractor.getSchema()
        });
  });
</script>

Startup options for jquery.xmleditor

• schema - The XML schema to be used by the editor, as a URL to a JSON file, function or a javascript object. The data referenced is a json representation of the schema, as generated by xsd2json. See the provided xsd2json examples. This object is required.
• ajaxOptions - Used for communicating with a remote source for receiving and/or submitting documents. It is an object containing the following properties:
  • xmlUploadPath - URL to submit the XML document to
  • xmlRetrievalPath - URL to retrieve the starting XML document from
  • xmlRetrievalParams - Any additional parameters to submit in the retrieval request
• documentTitle - Title for the document being edited, which is displayed at the top of the editor.
• elementUpdated - An optional event function which is triggered whenever an XML element is updated or rendered. It is triggered in the context of the element object modified, and includes an event object indicating which event took place and any additional information.
• menuEntries - A list of additional entries to add to the top menu bar, such as adding new help entries.
• confirmExitWhenUnsubmitted - Causes web browsers to prompt users if they try to navigate away from the editor while there are unsubmitted changes. Valid values: True or false.
• undoHistorySize - The number of history states remembered by the undo/redo feature. Default is 20.

Building the plugin yourself

If we wish to build the combined jquery.xmleditor.js yourself, you can use the provided rake script. With rake installed, simple type "rake" in the root directory of this project.

License Information

Copyright 2013 The University of North Carolina at Chapel Hill

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Authors

Ben Pennell

Mike Daines

Attribution

jquery json2.js and cycle.js Cloud9 IDE jquery.autosize.js vkbeautify