WebODF – publish and edit OpenDocument files in your web site or web app

von Friedrich W. H. Kossebau (KO GmbH), Tobias Hintze (KO GmbH)

WebODF is a JavaScript library which enables the viewing and editing of documents in the Open Document Format (ODF) in all webpages or web apps, using only HTML5 web standards. It was started in 2011 by Jos van den Oever at KO GmbH, sponsored by NLNet, and is now developed by a growing team including external collaborators. All code is available under the Affero General Public License (AGPL). KO GmbH also offers proprietary licenses on request.

WebODF can work completely client-side in the browser, so no server-side processing required, if not wanted. Abstraction layers allow the adaption to any messaging- or storage systems or other customization.

There are already a few applications which build on WebODF: plugins for the groupware Zarafa, the Roundcube Webmailer, as part of plugins from the Kolab Groupware Solution, and the document viewer webpage module ViewerJS employ WebODF for the display of ODF files. Tiki Docs, a revision-based editor for ODF documents with Tiki Wiki CMS Groupware, uses the single user editing capabilities of WebODF. The document editor ownCloud Documents relies on the new real-time collaborative editing support built into WebODF.

WebODF does not do any conversion of ODF documents to HTML. Instead it utilizes the XML handling abilities that are part of HTML5. A file in OpenDocument format is basically a ZIP compressed archive of a certain set of files in XML format. When WebODF loads an ODF file it extracts those files and creates their XML structures in memory. Then it puts these original XML structures of the ODF document into the webpage, telling the browser via calculated CSS rules how to display them. This helps keep both unsupported and custom data in the document in a load-save roundtrip. Images contained in ODF documents, in PNG, JPEG or SVG format, are stored as additional files in the ZIP archive. They just need to be extracted as they are, since they are natively supported by the browser for display.

Modification of a loaded ODF document is done based on the concept of operations. There is a defined list of possible minimal and simple changes that can be done on a document, with certain parameters per type of change. Each change is done by a corresponding operation. In case of interactive editing by a human user the editing commands send by the user, e.g. by pressing Backspace or by clicking the Bold button with text selected, are then translated into the defined operations, which then can be applied. Besides that such operations can be also generated by code directly, for automated processing.

To support collaborative editing, even real-time collaborative, Operational Transformation techniques are used on these operations to resolve the editing conflicts on concurrent changes. And because the cursors and selections of all users in a collaborative session are added to the shared document, each user can also see the cursors and selections of the others.

There are many use cases for WebODF: for publication of ODF documents in webpages, for workflows with review by annotation/editing, as a component in CMS, DMS or document/report generation apps, for normal document editors, either with a single user or collaborative. Some cases can be quickly satisfied by simple-to-use pre-made JavaScript modules, e.g. ViewerJS or the planned WebODFEditor module, which just needs the module file on the server and less than 10 lines of Javascript in the webpage. Others, with more specific needs, can make use of the abstraction layers in the WebODF library and for example write their custom editor UIs or a special intregration with their favourite web services.

Über den Autor Friedrich W. H. Kossebau:

Friedrich W. H. Kossebau is a software engineer at KO GmbH. He has been working on WebODF for more than a year, creating the realtime-collaborative editing engine. Prefers C++, but bravely deals with HTML5 realities.

Über den Autor Tobias Hintze: