Oct 04 2014

Web-based docx editing?

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.


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


3 Responses so far

  1. 1

    Pushkar said,

    October 6, 2014 @ 5:35 pm

    Can you please tell how to integrate this beautiful idea into my small web based application. Source code link or small tutorial how to implement it.

  2. 2

    Ben said,

    October 8, 2014 @ 8:00 pm

    Pushkar: the address to send email to is right there in the post. If you want to implement something like this, Jason is available for consulting.

  3. 3

    Aditya said,

    October 16, 2014 @ 5:14 pm

    The content from the CKEditor is rendered flawlessly to docx, but there is a problem with page breaks. If I insert a page break while editing in CKEditor then that is not getting reflected in the result docx file. I know there’s some changes need to be done in the way docx4j renders the CSS, but how can I do that?

Comment RSS