CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 5/API
Interface

CloudServicesConfig (cloud-services)

@ckeditor/ckeditor5-cloud-services/src/cloudservices

interface
See source

The configuration for all plugins using CKEditor Cloud Services.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        cloudServices: {
            tokenUrl: 'https://example.com/cs-token-endpoint',
            uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
        }
    } )
    .then( ... )
    .catch( ... );

See all editor options.

Filtering

Properties

  • documentId : String

    Document ID, used by RealTimeCollaborativeEditing plugin. All editor instances created with the same document ID will collaborate. It means that each document needs a different document ID if you do not want to start collaboration between these documents. The ID is usually a primary key of the document in the database, but you are free to provide whatever identifier fits your scenario.

    See source

    Note: unlike most plugins, RealTimeCollaborativeEditing is not included in any CKEditor 5 build and has to be installed manually. Check Collaboration overview for more details.

  • tokenUrl : String | function

    A token URL or a token request function.

    See source

    As a string it should be a URL to the security token endpoint in your application. The role of this endpoint is to securely authorize the end users of your application to use CKEditor Cloud Services, only if they should have access e.g. to upload files with Easy Image or to access the Collaboraation service.

    ClassicEditor
    .create( document.querySelector( '#editor' ), {
        cloudServices: {
            tokenUrl: 'https://example.com/cs-token-endpoint',
            ...
        }
    } )
    .then( ... )
    .catch( ... );

    As a function it should provide a promise to the token value, so you can highly customize the token and provide your token URL endpoint. By using that approach you can set your own headers to the request.

    ClassicEditor
    .create( document.querySelector( '#editor' ), {
        cloudServices: {
            tokenUrl: () => new Promise( ( resolve, reject ) => {
                const xhr = new XMLHttpRequest();

                xhr.open( 'GET', 'https://example.com/cs-token-endpoint' );

                xhr.addEventListener( 'load', () => {
                    const statusCode = xhr.status;
                    const xhrResponse = xhr.response;

                    if ( statusCode < 200 || statusCode > 299 ) {
                        return reject( new Error( 'Cannot download new token!' ) );
                    }

                    return resolve( xhrResponse );
                } );

                xhr.addEventListener( 'error', () => reject( new Error( 'Network Error' ) ) );
                xhr.addEventListener( 'abort', () => reject( new Error( 'Abort' ) ) );

                xhr.setRequestHeader( customHeader, customValue );

                xhr.send();
            } ),
            ...
        }
    } )

    You can find more information about token endpoints in the Cloud Services - Quick start and Cloud Services - Creating token endpoint documentation.

    Without a properly working token endpoint (token URL) CKEditor plugins will not be able to connect to CKEditor Cloud Services.

  • uploadUrl : String

    The endpoint URL for CKEditor Cloud Services uploads. This option must be set for Easy Image to work correctly.

    See source

    The upload URL is unique for each customer and can be found in the CKEditor Ecosystem dashboard after subscribing to Easy Image service. To learn how to start using Easy Image check Easy Image - Quick start documentation.

    Note: Make sure to also set the tokenUrl configuration option.

  • webSocketUrl : String

    The URL for web socket communication, used by RealTimeCollaborativeEditing plugin. Every customer (organization in the CKEditor Ecosystem dashboard) has its own, unique URLs to communicate with CKEditor Cloud Services. The URL can be found in the CKEditor Ecosystem dashboard.

    See source

    Note: unlike most plugins, RealTimeCollaborativeEditing is not included in any CKEditor 5 build and has to be installed manually. Check Collaboration overview for more details.