CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

ExportWordConfig (export-word)

@ckeditor/ckeditor5-export-word/src/exportword

interface

The configuration of the export to Word feature. It is used by the Word export features from the @ckeditor/ckeditor5-export-word package.

ClassicEditor
	.create( editorElement, {
		exportWord: ... // Export to Word feature options.
	} )
	.then( ... )
	.catch( ... );

See all editor options.

Filtering

Properties

  • converterOptions : ExportWordConverterOptions | ExportWordConverterOptionsV2 | undefined

    The CKEditor Cloud Services HTML to DOCX Converter configuration options.

    NOTE: Configuring the plugin is not mandatory.

    const exportWordConfig = {
	converterOptions: {
		...
	}
}

    Defaults to `{ document: { size: 'A4', orientation: 'portrait', language: editor.locale.contentLanguage, margin: { top: '1in', bottom: '1in', right: '1in', left: '1in' } } headers: undefined, footers: undefined, auto_pagination: false, base_url: undefined, extra_http_headers: undefined }`

  • converterUrl : string | undefined

    A URL to the Docx converter.

    const exportWordConfig = {
	converterUrl: 'https://myconverter.com/v2/'
}

    NOTE: The plugin uses the default HTML to Word converter delivered by CKEditor Cloud Services. You can provide a URL to an on-premises converter instead.

    Defaults to 'https://docx-converter.cke-cs.com/v2/convert/html-docx'

  • dataCallback : ( Editor ) => string | undefined

    A function to gather the HTML to be converted to Word.

    NOTE: This option may be useful when the editor does not have a getData() method, or if the HTML to be converted should be different than the edited one.

    const exportWordConfig = {
	dataCallback: ( editor ) => {
		return `
			<header id="header">${ editor.data.get( { rootName: 'header' } ) }</header>
			<div id="content">${ editor.data.get( { rootName: 'content' } ) }</div>
		`;
	}
}

  • fileName : string | () => string | undefined

    The name of the generated Word file.

    // Static file name.
const exportWordConfig = {
	fileName: 'my-document.docx'
}


// Dynamic file name.
const exportWordConfig = {
	fileName: () => {
		const articleTitle = document.querySelector( '#title' );

		return `${ articleTitle.value }.docx`;
	}
}

    NOTE: The file name must contain the .docx extension. Otherwise your operating system or device may have trouble identifying the file type.

    Defaults to 'document.docx'

  • stylesheets : Array<string> | undefined

    Paths to the .css files containing additional styling for the editor's content (the order of provided items matters).

    const exportWordConfig = {
	stylesheets: [ './path/to/custom-style.css' ]
}

    Default editor's content styles: The default editor content styles are applied to the generated Word file thanks to the 'EDITOR_STYLES' token, which is provided to the stylesheets by default. If you don't want them to be applied, you have to omit the token:

    NOTE: The 'EDITOR_STYLES' string is only supported in legacy custom builds with webpack or DLLs. In other setups you always need to pass the stylesheets.

    const exportWordConfig = {
	stylesheets: [ './path/to/custom-editor-styles.css' ]
}

    Custom styling: For more advanced styling, your configuration should look like this:

    const exportWordConfig = {
	stylesheets: [
		'./path/to/editor-styles.css',
		'./path/to/custom-styles.css'
	]
}

    Defaults to `[ 'EDITOR_STYLES' ]`

  • token : InitializedToken | undefined

    The authentication token.

    See: token

  • tokenUrl : false | TokenUrl | undefined

    A token URL or a token request function. This field is optional and should be used only when a different tokenUrl is required for the export to Word feature.

    Note: The token can be disabled with the false value provided.

    See: tokenUrl

  • version : 1 | 2 | undefined

    The version of Export to Word API.

    Defaults to '2'

  • watermark : ExportWordConverterWatermarkV2 | undefined

    The watermark configuration.

    	converterOptions: {
		watermark: {
			source: 'https://via.placeholder.com/200',
			width: '500px',
			height: '600px',
			washout: 'false'
		}
	}

    The watermark configuration is represented as an object containing 4 properties:

    • source: A source of the image used for the watermark.
    • width: A string value representing the width of the watermark.
    • height: A string value representing the height of the watermark.
    • washout: Determines whether the washout effect should be applied. Optional - the default value is false.