CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/Features

Email configuration helper

While configuring an email editor looks like a demanding task, the email configuration helper plugin is the best way to start and make this experience more manageable.

Unlock this feature with a CKEditor Paid Plan. Sign up for a free trial, or select the Plan that provides access to all the premium features you need.

# Demo

Look at the logs below to see the configuration problems.

The logs displayed below come from DevTools and show problems encountered by the editor during configuration validation. These issues may cause emails to be displayed incorrectly in various email clients.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

ℹ️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

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

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ EmailConfigurationHelper, /* ... */ ],
		link: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.

# Configuration

# Logs and warnings

The EmailConfigurationConfig property lets you suppress warnings or log messages about email client compatibility.

ClassicEditor
    .create( editorElement, {
        email: {
            logs: {
                suppressAll: false,
                suppress: [
                    'email-configuration-unsupported-reversed-list',
                    'email-configuration-unsupported-list-style-type',
                    // ... other message codes
                ]
            }
        }
    } )

# Common API

The EmailConfigurationHelper plugin registers the following components:

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.