Default header content
', css: templateCSS }, // Header template only for the first page of the document. { html: 'First document page header content
', css: templateCSS, type: 'first' }, // Header template for every even page of the document. { html: 'Every even page header content
', css: templateCSS, type: 'even' }, // Header template for every odd page of the document. { html: 'Every odd page header content
', css: templateCSS, type: 'odd' } ], footer: [ // Footer template for all footers (without the `type` property). { html: 'Default footer content
', css: templateCSS }, // Footer template only for the first page of the document. { html: 'First document page footer content
', css: templateCSS, type: 'first' }, // Footer template for every even page of the document. { html: 'Every even page footer content
', css: templateCSS, type: 'even' }, // Footer template for every odd page of the document. { html: 'Every odd page footer content
', css: templateCSS, type: 'odd' } ], } ``` ## HTML to Word converter features ### Styling a document By default, the [export to Word](../../api/module_export-word_exportword-ExportWord.md) plugin takes editor content styles and sends them to the CKEditor Cloud Services HTML to DOCX Converter. You can also add custom styles by providing the paths to the external CSS files. ```js // More editor's configuration. // ... exportWord: { fileName: 'document.docx', converterUrl: 'https://docx-converter.cke-cs.com/v2/convert/html-docx', stylesheets: [ 'path/to/editor-styles.css', 'path/to/my-styles.css' ], // More configuration of the export to Word feature. // ... } // More editor's configuration. // ... ``` #### Supported CSS properties The HTML to DOCX Converter supports proper CSS inheritance with a set of whitelisted properties. You can use them to style the document content. You can apply CSS properties like: * `color` * `background-color` * `font-size` * `font-family` * `text-align` to the following elements: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `span`, `td`, `th`, `strong`, `i`, `u`, `s`, `sub`, `sup`, `mark`. You can also position images using the `float` CSS property, supporting `left`, `right`, and `none` values. > **Note** > > You can use any CSS selector to style these elements, including classes, attributes, and the `*` selector. ### Setting the page format Consistency is an important factor. To make sure that the editor content and the generated Word file look the same, you need to match their format settings. You can change your existing style sheet or use a new one, for example, `format.css`. By default, the CKEditor Cloud Services HTML to DOCX converter is set to A4 format, but you may change this setting in your configuration. Assuming that you want to create a document in the US Letter format, with the standard margins (`19mm` for each side), here is the example code you can use: ```js ClassicEditor .create( { // ... Other configuration options ... exportWord: { stylesheets: [ 'path/to/editor-styles.css', 'path/to/my-styles.css' ], fileName: 'my-document.docx', converterOptions: { document: { size: 'Letter', // Document format settings with proper margins. margin: { top: '19mm', bottom: '19mm', right: '19mm', left: '19mm' } } } } } ) .then( /* ... */ ) .catch( /* ... */ ); ``` > **Note** > > This example focuses only on preparing the editable to match the converter settings. Please keep in mind that as a result, the appearance of your editor may change. Depending on your editor type and implementation or even some inherited global styles like `box-sizing`, applying new `padding` values may change the size of the editor on your website. > > For the purpose of this example, `box-sizing: border-box` was implemented to make sure that the editor’s width will not change. Now set the corresponding editor styles: ```css /* format.css */ /* Styles for the editable. */ .ck.ck-content.ck-editor__editable { /* US Letter size. */ width: 215.9mm; /* Padding is your document's margin. */ padding: 19mm; /* You don't want to change the size of the editor by applying the new padding values. */ box-sizing: border-box; /* ... */ } ``` With these settings, the content in the generated Word file should have the same US Letter format layout as it has in the editor. ### Header and footer The converter lets you set the document’s header and footer similarly to Microsoft Word or Google Docs. ```js const templateCSS = '.styled { color: #4b22aa; text-align: center; }' const converterOptions = { headers: { // Header template for all headers. default : { html: 'Default header content
', css: templateCSS }, // Header template only for the first page of the document. first: { html: 'First document page header content
', css: templateCSS }, // Header template for every even page of the document. even: { html: 'Every even page header content
', css: templateCSS }, // Header template for every odd page of the document. odd: { html: 'Every odd page header content
', css: templateCSS } }, footers: { // Footer template for all footers. default: { html: 'Default footer content
', css: templateCSS }, // Footer template only for the first page of the document. first: { html: 'First document page footer content
', css: templateCSS }, // Footer template for every even page of the document. even: { html: 'Every even page footer content
', css: templateCSS }, // Footer template for every odd page of the document. odd: { html: 'Every odd page footer content
', css: templateCSS } }, } ``` Regarding CSS, you can style the `headers` and `footers` using the same [supported properties](#supported-css-properties) as used for styling the whole document. For more details, refer to the [CKEditor Cloud Services HTML to DOCX converter’s documentation](https://docx-converter.cke-cs.com/v2/convert/docs). As you can see, the `headers` and `footers` options are objects whose keys (`default`, `first`, `even`, and `odd`) define the template for each page type. If you want a consistent template no matter the page, define only the `default` entry. If you import headers and footers from a Word document and want to preserve and reapply them when exporting, see the [preserving headers and footers](import-word/import-word.md#preserving-headers-and-footers) section in the [Import from Word](import-word/import-word.md) guide. ### Setting the base URL To enable proper resolution of relative URLs for images and links, you need to pass the `base_url` option: ```js const conversionOptions = { base_url: 'https://ckeditor.com' }; ``` For an editor’s content like the one below: ```html