Class DataFacadeController

Controller for getting and setting data. It prefers providing data on get from the previously set data if no editorial actions have been applied so far.

The controller may be used in three modes: standalone, delegating, and embedded.

Standalone Mode

The standalone mode may be used if you create the CKEditor instance late and require to set and retrieve data already before. A standalone controller may at any time be turned into a delegating controller.

Embedded Mode

The embedded mode is controlled by DataFacade plugin. The plugin will maintain this embedded instance of the controller and use it when binding to the Autosave plugin.

Delegating Mode

A controller in standalone mode may (once) be turned into delegating mode. The setup requires the DataFacade plugin to be installed. The standalone controller will then bind to the controller held by the DataFacade, propagate any possibly already set data and will only use delegate calls afterward.

Recommended Mixed Setup

The recommended setup, if you require the controller in the standalone mode, is to switch to delegating mode, as soon as the editor is available. The control flow may be roughly sketched as follows:

import { DataFacade, DataFacadeController } from "@coremedia/ckeditor5-data-facade";

const standaloneController = new DataFacadeController();

// You may set (and get) data already now.
standaloneController.setData("<p>Hello Standalone!</p>");

ClassicEditor
  .create( document.querySelector( '#editor' ), {
    plugins: [
      // Transitive Dependency on Autosave.
      DataFacade,
    ],
    autosave: {
      // no save needed
       waitingTime: 5000, // in ms
    },
    dataFacade: {
      save(controller) {
        // saveData providing a promise to store data
        // in an external data storage.
        return saveData( controller.getData() );
      }
    }
  })
  .then( (editor) => {
    // Will turn the controller into delegating mode.
    standaloneController.init(editor);
  })
  .catch( (error) => {
    console.error( error );
  } );

// Now the standalone controller delegates to the
// embedded controller.
standaloneController.setData("<p>Hello Delegating!</p>");
Copy