Report an issue

guideSaving data without suggestions

Sometimes you may need to save editor data with all the suggestions accepted or discarded. Common cases include document preview or printing.

# Track changes data plugin

To enable saving data without suggestions you will need to use the TrackChangesData plugin. It is available in the track changes package. Import it and add to your build:

import { TrackChangesData } from '@ckeditor/ckeditor5-track-changes';

// More imports.
// ...

ClassicEditor.builtinPlugins = [ TrackChangesData, /* ... */ ];

Then you can use the track changes data plugin API to get the editor data with all the suggestions accepted or discarded:

const data = await editor.plugins.get( 'TrackChangesData' ).getDataWithAcceptedSuggestions();

Note that this method is asynchronous (it returns a promise that resolves with the editor data).

# Configuring track changes data plugin

In most common cases, there is no need for any configuration regarding the track changes data plugin. However, sometimes running the track changes data plugin needs more effort.

In general, the track changes data plugin uses a temporary editor instance to load the current data, accept or discard the suggestions and then get the editor data.

This may raise some issues in the following scenarios:

  • if some actions are performed after the editor is initialized (for example, loading some kind of data for your custom plugins),
  • if you use your own, custom editor class, whose API is different from ClassicEditor.

In these cases, you can provide your own callback as a configuration parameter for the track changes data plugin:

{
    trackChangesData: {
        editorCreator: ( config, createElement ) => {
            // Custom callback.
            // ...
        }
    }
}

Two parameters are passed to the callback:

  • config - The editor configuration that should be used to initialize the editor.
  • createElement - A function that creates a DOM element, should you need one (or more) to initialize your editor. The DOM elements created by this function are hidden and will be cleared after the plugin finishes its work.

The callback should return a promise that resolves with the editor instance.

An example of a callback using a multi-root editor that requires passing multiple roots in the first parameter of the .create() method.

{
    trackChangesData: {
        editorCreator: ( config, createElement ) => {
            return CustomMultiRootEditor.create( {
                header: createElement(),
                content: createElement(),
                footer: createElement()
            }, config );
        }
    }
}