Following on from the previous post on content tracking, some people have been asking about how to edit a docx in a web browser.

So I thought I’d link to a proof of concept we did a year or so ago.

The idea is:

• use docx4j to convert the docx to XHTML
• use CKEditor to edit that XHTML in the web browser
• on submit, convert the XHTML back to docx content

The general problem with converting to/from XHTML is the “impendance mismatch”.  That is, losing stuff during round trip.  This will be a familiar problem to anyone who has ever edited a docx in Google Docs or LibreOffice.

This demo addresses that problem by identifying docx content which CKEditor would mangle, and then on submit/save, using the original docx content for those bits.

In this demo, the problematic content is replaced with visual placeholders, so you can see it is there.

The intent is that you can add/edit text content in the browser, without other document content (headers/footers, text boxes etc) getting lost.

To give it a try, go to the upload page and choose a docx file from your computer

You should see your docx open with the CKEditor toolbars above it:

(In the demo and screenshot above, the grey “B” image represents a bookmark)

Make some edits, then hit the Submit button (at the bottom).

The docx will be streamed back to your computer as a download in your browser.

Now open it in Word, and compare it to the original.

Feedback

If you want to add this type of functionality to your application, please let us know by emailing jharrop@plutext.com

We’d love to hear:

• a bit more about your use case,
• where you see your users doing their web-based editing:- on your intranet, extranet, or the web at large?
• what kind of editing? is it proof reading,  customising particular sections, a step in a workflow..?
• do you need to cater for iPads or Android tablets?  And if so, is a dedicated app on your roadmap?
• any additional requirements you might have!

Update (Oct 2015)

Source code is available at https://github.com/plutext/docx-html-editor