Report an issue

guideGet data with all suggestions accepted

# Track changes data plugin

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

To enable this 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/src/trackchangesdata';

// ...

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 many cases, there is no need for any configuration regarding the track changes data plugin. However, there are some circumstances when an additional effort needs to be made in order to run track changes data plugin.

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 you use “load & save” integration type for comments or track changes features,
  • if some actions are performed after the editor is initialized (for example, load 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 ) => {
            // ...
        }
    }
}

Two parameters are passed to the callback:

  • config - the editor config 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 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 );
        }
    }
}

In case of “load & save” integration for collaboration features, you will need to make sure, that comments and suggestions data is not added to the editor. For example, if you provide a plugin that adds the collaboration features data to the editor, you will need to remove that plugin from the config:

{
    trackChangesData: {
        editorCreator: ( config, createElement ) => {
            config.plugins = config.plugins.filter( plugin => plugin != CollaborationIntegration );

            return ClassicEditor.create( createElement(), config );
        }
    }
}