How can I disable drop events in CKEditor 5

Question

we are trying to implement CKEditor 5 into our apps and we are struggling a bit with docs.

We want to disable drop event into an editing area or control it somehow. Is there an event for that?

We were trying editor.model.document.on('clipboardInput') or editor.model.document.on('dragover') without any luck. These events are not fired.

Answer 1

You need to listen to the dragover and drop events on the view layer instead of on the model.

I prepared a simple function that can be loaded as a plugin to CKEditor 5 which cancels these events:

/**
 * Cancel the `drop` and `dragover` events.
 *
 * @param {module:core/editor/editor~Editor} editor
 */
function cancelDropEvents( editor ) {
    // High priority means that the callbacks below will be called before other CKEditor's plugins.

    editor.editing.view.document.on( 'drop', ( evt, data ) => {
        // Stop executing next callbacks.
        evt.stop();

        // Prevent the default event action.
        data.preventDefault();
    }, { priority: 'high' } );

    editor.editing.view.document.on( 'dragover', ( evt, data ) => {
        evt.stop();
        data.preventDefault();
    }, { priority: 'high' } );
}

You can check how it works online – https://jsfiddle.net/pomek/qz0o9ku0/.