{"id":299,"date":"2014-10-04T10:27:42","date_gmt":"2014-10-04T00:27:42","guid":{"rendered":"http:\/\/www.docx4java.org\/blog\/?p=299"},"modified":"2015-10-04T12:17:58","modified_gmt":"2015-10-04T02:17:58","slug":"web-based-docx-editing","status":"publish","type":"post","link":"https:\/\/www.docx4java.org\/blog\/2014\/10\/web-based-docx-editing\/","title":{"rendered":"Web-based docx editing?"},"content":{"rendered":"<p>Following on from the previous post on content tracking, some people have been asking about how to edit a docx in a web browser.<\/p>\n<p>So I thought I&#8217;d link to a proof of concept we did a year or so ago.<\/p>\n<p>The idea is:<\/p>\n<ul>\n<li><span style=\"font-size: 13px;\">use docx4j to convert the docx to XHTML<\/span><\/li>\n<li><span style=\"font-size: 13px;\">use CKEditor to edit that XHTML in the web browser<\/span><\/li>\n<li><span style=\"font-size: 13px;\">on submit, convert the XHTML back to docx content<\/span><\/li>\n<\/ul>\n<p>The general problem with converting to\/from XHTML is the &#8220;impendance mismatch&#8221;. \u00a0That is, losing stuff during <strong>round trip<\/strong>. \u00a0This will be a familiar problem to anyone who has ever edited a docx in Google Docs or LibreOffice.<\/p>\n<p>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.<\/p>\n<p>In this demo, the problematic content is replaced with visual placeholders, so you can see it is there.<\/p>\n<p>The intent is that you can add\/edit text content in the browser, without other document content (headers\/footers, text boxes etc) getting lost.<\/p>\n<p>To give it a try,\u00a0<span style=\"font-size: 13px;\">go to the <\/span><a style=\"font-size: 13px;\" href=\"http:\/\/fabdocx.com:8086\/docx-editor-poc\/upload.html\">upload page<\/a><span style=\"font-size: 13px;\"> and choose a docx file from your computer<\/span><\/p>\n<p><span style=\"font-size: 13px;\">You should see your docx open with the CKEditor toolbars above it:<\/span><\/p>\n<p><a style=\"font-size: 13px;\" href=\"http:\/\/www.docx4java.org\/blog\/wp-content\/uploads\/2014\/10\/editor-screenshot.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-300\" title=\"editor-screenshot\" src=\"http:\/\/www.docx4java.org\/blog\/wp-content\/uploads\/2014\/10\/editor-screenshot-292x300.png\" alt=\"\" width=\"292\" height=\"300\" srcset=\"https:\/\/www.docx4java.org\/blog\/wp-content\/uploads\/2014\/10\/editor-screenshot-292x300.png 292w, https:\/\/www.docx4java.org\/blog\/wp-content\/uploads\/2014\/10\/editor-screenshot.png 880w\" sizes=\"auto, (max-width: 292px) 100vw, 292px\" \/><\/a><\/p>\n<p>(In the demo and screenshot above, the grey &#8220;B&#8221; image represents a bookmark)<\/p>\n<p>Make some edits, then hit the Submit button (at the bottom).<\/p>\n<p>The docx will be streamed back to your computer as a download in your browser.<\/p>\n<p>Now open it in Word, and compare it to the original.<\/p>\n<p><strong>Feedback<\/strong><\/p>\n<p>If you want to add this type of functionality to your application, please let us know by <strong>emailing jharrop@plutext.com<\/strong><\/p>\n<p>We&#8217;d love to hear:<\/p>\n<ul>\n<li><span style=\"font-size: 13px;\">a bit more about your use case, <\/span><\/li>\n<li><span style=\"font-size: 13px;\">where you see your users doing their web-based editing:- on your intranet, extranet, or the web at large? <\/span><\/li>\n<li><span style=\"font-size: 13px;\">what kind of editing? is it proof reading, \u00a0customising particular sections, a step in a workflow..?<\/span><\/li>\n<li>do you need to cater for iPads or Android tablets? \u00a0And if so, is a dedicated app on your roadmap?<\/li>\n<li>any additional requirements you might have!<\/li>\n<\/ul>\n<p><strong>Update (Oct 2015)<\/strong><\/p>\n<p>Source code is available at <a href=\"https:\/\/github.com\/plutext\/docx-html-editor\">https:\/\/github.com\/plutext\/docx-html-editor<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[97,10,71],"tags":[],"class_list":["post-299","post","type-post","status-publish","format-standard","hentry","category-docx","category-docx4all","category-microsoft-word"],"_links":{"self":[{"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/posts\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/comments?post=299"}],"version-history":[{"count":3,"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/posts\/299\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/posts\/299\/revisions\/379"}],"wp:attachment":[{"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/categories?post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.docx4java.org\/blog\/wp-json\/wp\/v2\/tags?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}