CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

ExportInlineStylesConfig (export-inline-styles)

@ckeditor/ckeditor5-export-inline-styles/src/exportinlinestyles

interface

The configuration of the export inline styles feature. It is used by the @ckeditor/ckeditor5-export-inline-styles package.

ClassicEditor
	.create( editorElement, {
		exportInlineStyles: ... // Export inline styles feature options.
	} )
	.then( ... )
	.catch( ... );

Filtering

Properties

  • inlineCss : string | undefined

    Internal CSS styles that will be processed after the external stylesheets. The styles should be provided as a regular CSS string.

    const exportInlineStylesConfig = {
	inlineCss: `
		.my-class {
			color: red;
			font-weight: bold;
		}

		.other-class {
			margin: 10px;
			padding: 5px;
		}
	`
}

    NOTE: These styles are processed after the external stylesheets, so they can override styles from external files.

    Defaults to ''

  • stripCssClasses : boolean | undefined

    When enabled, CSS classes will be removed from DOM elements after the inline styles have been applied. This ensures that the exported content does not depend on external CSS classes while preserving the visual styling through inline styles.

    const exportInlineStylesConfig = {
	stripCssClasses: true
}

    Defaults to false

  • stylesheets : Array<string> | undefined

    Paths to the .css files containing styling that should be converted to inline styles (the order of provided items matters).

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

    NOTE: If stylesheets are not provided, the plugin will process only the default editor content styles.

    Default editor's content styles: The default editor content styles are processed thanks to the 'EDITOR_STYLES' token, which is provided to the stylesheets by default. If you don't want them to be processed, 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 exportInlineStylesConfig = {
	stylesheets: [ './path/to/custom-editor-styles.css' ]
}

    Multiple stylesheets: You can provide multiple stylesheets that will be processed in order:

    const exportInlineStylesConfig = {
	stylesheets: [
		'./path/to/base-styles.css',
		'./path/to/theme-styles.css',
		'./path/to/custom-styles.css'
	]
	]
}

    Defaults to [ 'EDITOR_STYLES' ]

  • transformations : Array<ExportInlineStylesTransformation> | undefined

    A list of transformation callbacks applied to HTML elements before assigning inlined styles to them and processing the children. It allows you to modify the elements based on the applied styles.

    Note that the wrapping element with class ck-content is transformed first. Setting inline styles on this element will cause those styles to be inherited by all its child elements.

    const exportInlineStylesConfig = {
		transformations: [
			( element, stylesMap ) => {
				if ( element.tagName.toLowerCase() === 'p' && stylesMap.get( 'text-align' ) === 'center' ) {
					element.setAttribute( 'data-aligned', 'center' );
					stylesMap.remove( 'text-align' );
				}

				// Example of setting a font on the root `ck-content` element.
				// This will cause all child elements to inherit the font and color.
				if ( element.classList.contains( 'ck-content' ) ) {
					stylesMap.set( 'font-family', 'Arial, sans-serif' );
					stylesMap.set( 'color', '#333' );
				}
			},
			// ...
		]
}

    Defaults to []