Email editing in CKEditor 5 (overview)

CKEditor 5 provides a wide variety of tools and functions for editing almost any kind of content. This, too, includes email editing. However, creating and editing emails is a demanding task that needs a proper configuration. This is due to a variety of software products and a lack of a standardized approach. The email editing solution is a set of tools aimed at making the email composition a better and more effective experience.

# Demo

Use the demo below to see the feature in action. Click the layout table toolbar button to insert a new layout table. It is useful in creating email templates. Experiment with the newsletter content - see how it looks in the editor and the source HTML.

The Magic of Green Tea

Hello {{clientName}}!

Looking for a refreshing way to boost your health? Green tea is packed with antioxidants, supports digestion, and helps you stay energized - naturally! Whether you love it hot or iced, every sip brings wellness to your day.

✨ Exclusive Offer ✨

Get {{discountValue}} off our premium green tea collection!

Get discount

Sip the benefits

{{benefit1}} Natural caffeine for sustained focus {{benefit2}} Protects cells and supports overall wellness {{benefit3}} Help support your body's natural defences

Shop now

Want to change how you receive these emails? You can update your preferences or unsubscribe from this list.

Photo by rajat sarki on Unsplash Copyright 2025 CKSource Holding sp. z o.o. All rights reserved.

# Setting up your email editor

A good email editor is a versatile, advanced software solution and as such, it needs several additional features. A set of CKEditor 5 plugins forms the full experience. Below is a list of all email-assisting features that may be useful when preparing a full-fledged email editor.

# Email configuration helper

The email configuration helper features provides a comprehensive set of tools for email composition and editing. It helps overcome various semantic and technical difficulties by:

• Verifying editor configuration for email compatibility.
• Ensuring proper HTML structure for email clients.
• Managing content restrictions specific to email formats.
• Providing warnings about unsupported features in email clients.

Using this feature alongside export with inline styles ensures your email content not only looks correct but also follows email-specific best practices and technical requirements. Learn how to configure it in the email configuration helper guide.

# Layout tables plugin

The layout tables feature provides specialized layout tables that are specifically designed for structuring email content, as opposed to presenting data in traditional content tables. For optimal email template development, we recommend using the TableLayout plugin alongside the export with inline styles feature.

Layout tables created using the TableLayout plugin:

• Have role="presentation" for better accessibility.
• Include proper styling optimized for email layouts (100% width, proper borders, and padding).
• Maintain their appearance when exported with inline styles.

This is particularly important for email templates where table-based layouts are still the standard practice. The combination of layout tables and inline styles export ensures that your email templates maintain their structure and appearance across different email clients.

Learn how to configure it in the Layout tables guide.

# Export with inline styles plugin

The export inline styles feature turns the editor’s global CSS styles into inline styles for DOM elements. For example, a global <p class="red"> style defining the font color to be red will be turned into <p style="color: red">. Learn how to configure it in the export with inline styles guide.

# Email-specific style transformations

For email-specific use cases, the package provides dedicated transformations through the getEmailInlineStylesTransformations() function. These transformations improve compatibility with email clients by converting modern CSS properties to better-supported HTML attributes.

To use these transformations, import the function and include it in your editor configuration:

import { ClassicEditor } from 'ckeditor5';
import { ExportInlineStyles, getEmailInlineStylesTransformations } from 'ckeditor5-premium-features';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ ExportInlineStyles, /* ...other plugins */ ],
		exportInlineStyles: {
			// Add email-specific transformations to the editor configuration.
			transformations: getEmailInlineStylesTransformations()
		}
	} )
	.then( editor => {
		// When exporting content, the email transformations will be applied automatically.
		editor.execute( 'exportInlineStyles' )
			.then( html => {
				console.log( 'Email-ready content with proper HTML attributes:', html );
			} );
	} )
	.catch( error => {
		console.error( error );
	} );

The provided transformations handle the following email-specific styling conversions:

1. Float to align attribute:

   • <img style="float: left"> → <img style="float: left" align="left">
   • <table style="float: right"> → <table style="float: right" align="right">

2. Table centering via auto margins:

   • <table style="margin-left: auto; margin-right: auto"> → <table style="..." align="center">

These transformations ensure better rendering consistency across various email clients that may have limited CSS support but respect traditional HTML attributes.

You can also combine these email transformations with your own custom transformations:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ExportInlineStyles, /* ...other plugins */ ],
        exportInlineStyles: {
            transformations: [
                ...getEmailInlineStylesTransformations(),
                // Your additional custom transformations.
                ( element, stylesMap ) => {
                    if ( element.tagName === 'A' ) {
                        stylesMap.set( 'text-decoration', 'underline' );
                    }
                }
            ]
        }
    } );

# Plain table output

This feature strips the table data from the <figure> tag and moves all applied attributes to the table element. This is because this tag is not supported by most popular email clients and removing it ensures compatibility. Learn more about this plugin in the Plain table output API guide.

# Merge fields plugin

Merge fields are visually distinct placeholder elements, which you may put into the content to mark places, where real values should be inserted. This is perfect for creating document templates and other kinds of personalized content. Learn how to configure it in the Merge fields guide.

# Template plugin

The template plugin allows you to create and manage templates in the editor. It provides a user-friendly interface for selecting and applying templates to your content. It is useful for creating consistent email designs and layouts. Learn how to configure it in the Templates guide.

# Empty block plugin

The EmptyBlock plugin removes the   fillers added by default to empty block elements like paragraphs. In some cases, such as loading legacy content, this prevents inconsistent rendering across email clients and interference with the CSS styling.

Here is how empty blocks are handled with and without the plugin:

<!-- Without EmptyBlock plugin -->
<p class="spacer">&nbsp;</p>
<td>&nbsp;</td>

<!-- With EmptyBlock plugin -->
<p class="spacer"></p>
<td></td>

To enable the EmptyBlock plugin, add it to your editor configuration:

import { EmailConfigurationHelper } from 'ckeditor5-premium-features';
import { EmptyBlock } from 'ckeditor5';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ EmailConfigurationHelper, EmptyBlock, /* ... */ ],
		htmlSupport: {
			preserveEmptyBlocksInEditingView: true
		}
	} )
	.then( editor => {
		console.log( 'Editor was initialized' );
	} )
	.catch( error => {
		console.error( error );
	} );

The preserveEmptyBlocksInEditingView option determines whether empty blocks should be preserved during editing (true) or only in the final output (false).

# Known issues

Email rendering can vary significantly between different email clients due to inconsistent HTML and CSS support. What looks perfect in one client may appear broken in another. Always test your emails in various popular clients and devices before sending them to ensure consistent appearance and functionality across platforms.

• Email clients’ default styles can significantly impact the rendering of your content. Even small changes like adding the <!DOCTYPE html> preamble to your email can dramatically alter the appearance of your content. However, many email clients use their rendering engines and may ignore the DOCTYPE altogether. Including it does not cause harm and is considered a best practice.
• Email clients do not support all color modes available in the editor. If you intend to use, for example, the font color or font background color features in your editor, please set the color picker to hex mode for optimal compatibility.
• Most email clients offer no support for alpha channel settings in the rgb color mode.

# Related features

Here are some related CKEditor 5 features that you may find helpful:

• Export with inline styles – The export with inline styles feature turns all external CSS style sheets into inline styles, providing better compatibility with various email clients.
• Layout tables – Create layout tables optimized for email templates with proper structure and styling.
• Plain table output – This plugin strips the <figure> tag from the table data for email client compatibility.
• Merge fields – Create placeholder elements in your content to replace later.
• General HTML support – Add support for additional HTML elements and attributes in your content.
• Styles – Apply predefined styles to content elements that can be exported as inline styles.