guideExport to Word

The ExportWord feature allows you to generate a .docx file directly from the CKEditor 5 WYSIWYG editor content.

When enabled, this feature sends the content of your editor together with the styles that are used to display it to the CKEditor Cloud Services HTML to DOCX converter service. The service then generates a Word document that can be downloaded by the user. This allows you to easily export your content to the Microsoft Word format.

This feature is now in beta version. It is free to use while in the beta phase.

This is a premium feature. Please contact us if you would like to purchase a license. Let us know if you have any feedback or questions!

# Demo

The demo below allows you to generate a Word file based on the editor content. Craft the document content in the WYSIWYG editor, then click the “Export to Word” toolbar button to save it as a Word file.

The Flavorful Tuscany Meetup

Welcome letter

Dear Guest,

We are delighted to welcome you to the annual Flavorful Tuscany Meetup and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.

Please find attached the full schedule of the event.

The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!

Angelina Calvino, food journalist

Please arrive at the Bilancino Hotel reception desk at least half an hour earlier to make sure that the registration process goes as smoothly as possible.

We look forward to welcoming you to the event.

Victoria Valc, Event Manager at Bilancino Hotel

 

 

 

The Flavorful Tuscany Meetup Schedule

Saturday, July 14
9:30 AM - 11:30 AM

Americano vs. Brewed - “know your coffee” with: 

  • Giulia Bianchi
  • Stefano Garau
  • Giuseppe Russo
1:00 PM - 3:00 PM

Pappardelle al pomodoro - live cooking 1

Incorporate the freshest ingredients 
with Rita Fresco

5:00 PM - 8:00 PM Tuscan vineyards at a glance - wine-tasting 
with Frederico Riscoli

1 Registration for the live cooking session is required as seats are limited.

 

# How it works

The export to Microsoft Word feature collects the HTML generated with the editor.getData() method and the default editor content styles combined with the styles provided by you in the configuration. It then sends them to the CKEditor Cloud Services HTML to DOCX converter service. The service generates a Word file and returns it to the user’s browser so they can save it in the Word format on their disk.

# Installation

To add the export to Word feature to your editor, install the @ckeditor/ckeditor5-export-word package:

npm install --save @ckeditor/ckeditor5-export-word

Then add the ExportWord plugin to your plugin list and configure it:

import ExportWord from '@ckeditor/ckeditor5-export-word/src/exportword';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ExportWord, ... ],
        toolbar: [
            'exportWord', '|',
            ...
        ],
        exportWord: {
            fileName: 'my-file.docx',
        }
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Configuration

For more technical details, please check the plugin configuration API.

# Default configuration

This is the default configuration of the Word export feature for CKEditor 5.

{
    exportWord: {
        fileName: 'document.docx',
        converterUrl: 'https://docx-converter.cke-cs.com/v1/convert',
        stylesheets: [ 'EDITOR_STYLES' ],
        converterOptions: {
            header: undefined,
            footer: undefined
        }
    }
}

# Plugin options

For some use cases the default configuration will suffice. As you can see in the example above, you can improve how your Word file will look by adjusting the Word export plugin configuration.

# HTML to Word converter features

The converter allows you to set the document’s header and footer in a similar way as you do this in your Microsoft Word or Google Docs files.

// Let's keep the CSS string as a variable to avoid unnecessary string duplication.
const templateCSS = '.styled { font-weight: bold; text-align: center; }'

const converterOptions = {
    header: [
        // Header template for all headers (without the `type` property).
        { html: '<div class="styled">Default header content</div>', css: templateCSS },
        // Header template only for the first page of the document.
        { html: '<div class="styled">First document page header content</div>', css: templateCSS, type: 'first' },
        // Header template for every even page of the document.
        { html: '<div class="styled">Every even page header content</div>', css: templateCSS, type: 'even' },
        // Header template for every odd page of the document.
        { html: '<div class="styled">Every odd page header content</div>', css: templateCSS, type: 'odd' }
    ],
    footer: [
        // Footer template for all footers (without the `type` property).
        { html: '<div class="styled">Default footer content</div>', css: templateCSS },
        // Footer template only for the first page of the document.
        { html: '<div class="styled">First document page footer content</div>', css: templateCSS, type: 'first' },
        // Footer template for every even page of the document.
        { html: '<div class="styled">Every even page footer content</div>', css: templateCSS, type: 'even' },
        // Footer template for every odd page of the document.
        { html: '<div class="styled">Every odd page footer content</div>', css: templateCSS, type: 'odd' }
    ],
}

As you can see, the header and footer options take an array of objects that define templates for the particular type of page. If you want to have consistent templates no matter the page, you can define only the all headers/footers templates (NOTE: This setting misses the type property on purpose).

  • The HTML template supports all elements that you can set for the content body.
  • The CSS templates support all selectors (including *) and the following style properties: color, background-color, font-size, font-family, text-align.

For more details, refer to the CKEditor Cloud Services HTML to DOCX converter’s documentation.

# Comments and suggestions

When your editor has collaboration features (like comments and track changes) enabled, the Export to Word feature will take care of setting the configuration needed by the CKEditor Cloud Services HTML to DOCX converter. But if for some reason you need to pass your own data, you can do this via the REST API converter options.

Note: Currently formatting suggestions are not supported. Only insertions and deletions will work correctly with the CKEditor Cloud Services HTML to DOCX converter.

# Styling a document

By default, the Export to Word plugin takes the editor content styles and sends them to the CKEditor Cloud Services HTML to DOCX converter. You can also add your own styles by providing the paths to the external CSS files.

    // ...
    exportWord: {
        fileName: 'document.docx',
        converterUrl: 'https://docx-converter.cke-cs.com/v1/convert',
        stylesheets: [
            'EDITOR_STYLES',
            'path/to/my-styles.css'
        ],
        // ...
    }
    // ...

Styles like color, background-color, font-size, font-family and text-align will be applied to the following elements: h1, h2, h3, h4, h5, h6, p, span, td, th, strong, i, u, s, sub, sup.

# Other

  • By default, the generated Word file is encoded with UTF-8.

# Known issues

Not all plugins and features work as expected at the moment. Here is a list of known issues:

# Unsupported plugins

# Unsupported features

  • Inline and block formatting suggestions.
  • Commenting whole widgets.

# Common API

The ExportWord plugin registers:

  • The 'exportWord' button.

  • The 'exportWord' command implemented by ExportWordCommand.

    The command can be executed using the editor.execute() method:

    // Start generating a Word file based on the editor content and plugin configuration.
    editor.execute( 'exportWord' );