Feature spotlight - HTML to Word converter

Welcome to the Feature Spotlight, a new series of posts on the CKSource blog. Much like its predecessor, the Feature of the Month series, this one will concentrate on shedding light on different, amazing, sometimes overlooked features of CKEditor. It is an attempt to draw the attention of our user community toward the solutions they may need and not even know about yet.

Document cross-platform interoperability and portability are some of the most important challenges of modern-day editing. An industry standard for text edition is nowadays Microsoft Word. Even the emergence of cloud solutions like Google Docs could not seriously endanger Redmond product’s position on the market. Meanwhile, Word document – .docx – file format is a widely recognized type that can be opened practically on any platform or operating system.

We provide the toolset that supports creating Word .docx files. CKEditor Cloud Services offers a fast and highly scalable service enabling the user to export documents to the Word format.

# How it works

There are two main components of our product. One of these, the main base and the foundation of the service, is the HTML to Word converter, which is provided by CKSource’s own backend – Cloud Services. Despite the name, Could Services offers both server-side SaaS solutions and the Collaboration Server On-Premises package. The other component is a CKEditor plugin – the Export to Word feature, which lets the authors and editors using CKEditor generate .docx files as easily as a single toolbar button click.

The HTML to Word service can be used in two different ways:

  • A plugin for CKEditor 5 WYSIWYG editor, so that your end-users could generate Word documents from within the editor. An appropriate plugin needs to be added to your editor build as this is not pre-bundled.

  • A REST API service to convert HTML to Word (z.docx) documents, which can allow your application to programmatically generate .docx files from content saved in the database.

# The Export to Word CKEditor plugin

The Export to Word CKEditor plugin allows you to easily convert an editor HTML content to Word (.docx) file. When enabled, this feature converts the content of the editor using HTML to Word Cloud Service. The endpoint service itself generates a Word document that can be downloaded by the user. It is fast, efficient, and requires no advanced knowledge for the regular user – thus, it basically works like Word’s native “Save as…” functionality!

One-click-easy – the generation of a `.docx` file for the end-user is as simple as it gets.
One-click-easy – the generation of a `.docx` file for the end-user is as simple as it gets.

The Export to Word feature collects the editor’s rich text content and sends it to the CKEditor Cloud Services HTML to DOCX converter.

This is an easy solution for integrations, that does not demand editor data be processed further once it is edited. It is also just one possible practical application, however, as there is much more to the converter than the simple ability to generate a Word-compatible document file.

# The HTML to MS Word REST API Service

The CKEditor 5 plugin is just an end-user output mechanism, but the heart of the service beats somewhere else. The converter provides an extended API – allowing to effortlessly convert HTML to Word.

The API accepts HTML as the input to convert. Any HTML-compliant content can be fed to the converter producing well-formatted, rich text Word documents. Take a look at how easily that feature could be integrated into your application:

const fs = require( 'fs' );
const axios = require( 'axios' );

const data = {
   html: "<p>I am a teapot</p>",
   css: "p { color: red; }",
   options: {
      header: [
         {
            html: '<h1>Hi! I\'m header!</h1>',
            css: 'h1 { color: pink; }',
            type: 'first'
         }
      ]
   }
};

const config = {
   headers: {
      'Authorization': authorizationToken
   },
   responseType: 'arraybuffer',
};

axios.post( 'https://docx-converter.cke-cs.com/v1/convert', data, config )
	.then( response => {
		fs.writeFileSync('./file.docx', response.data, 'binary')
	} ).catch( error => {
		console.log( error );
	} );

This example listing shows a way to integrate the code. To use it in practice, however, you need to follow the steps of the Export to Word Quick start guide to make it work.

The converter also parses and converts CSS styles attached to the content. It may be either inline styles or a separate CSS stylesheet, it is up to your preferences. You can find out more about CSS support in the proper section of the API documentation.

# Converter options

The API options configuration can be divided into two functional parts.

# Layout configuration

This set of API options provides full control over the effecting document layout and includes settings for headers and footers (also separate for 1st page and odd and even pages), paper size, orientation, and margins.

These options let you set the technical details for the converted MS Word file. You can try them out in the online HTML to MS Word converter demo.

# Collaborative options

The following two options comments and suggestions – are special. These allow preserving editor collaboration features like comments and suggestions directly inside generated Word document. When the authors use the collaboration features, they would want to retain the comments and suggestions (tracked changes) introduced in the document. The converter keeps all that data intact and puts it functionally in the MS Word file for further use.

A comment added in CKEditor 5 is carried over and can be read in MS Word.
A comment added in CKEditor 5 is carried over and can be read in MS Word.
The same applies to suggestions added with the track changes feature – they are recognized as changes by MS Word.
The same applies to suggestions added with the track changes feature – they are recognized as changes by MS Word.

Thanks to this, features that include multi-user collaboration, reviews, and changes become portable and available cross-platform. In modern business environments, the highest available compatibility between different editing solutions is one of the most crucial issues in the face of many popular standards present despite the hegemony of MS Word.

# Practical application

The HTML to MS Word converter is a versatile, powerful tool that editors and system administrators may easily employ for their own benefit. The ability to use a portable editing solution is truly invaluable. Online cloud solutions are not always available and some companies do not rely on such systems, as they would rather base their file storage on local disks. If that is the case, a takeaway file that can be edited and then brought back offers a simple and effective answer. This is especially the case when it retains collaboration data!

The same applies to inter-company document exchanges. Popular cloud systems, though widespread, are not necessarily available for all parties due to several reasons like security, for example. Being able to prepare an editable document and send it – while still keeping the tracking and commenting ability! – is an easy solution.

And all that is just the editor endpoint or the Export to Word plugin for users. The converter itself provides much more powerful applications. It can be used to bulk convert content taken from a database; it can also be fed a set of documents that need to be turned portable or be a gateway to creating a file archive and otherwise stored data.

If you think this kind of solution is just what you need, feel free to contact us and ask about this and other premium features that we offer.

Feature spotlight is a fresh series of articles showcasing these more utilized and these sometimes less known features of CKEditor. You may want to also check out the Feature of the month blog posts dedicated to features like tables, collaboration, spell checking or productivity enhancers.

There are also online editing solutions that employ these features like the online Markdown editor or real-time collaboration editor that features the Export to Word plugin and lets you test it out from the get go.

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });