CODEWITHSUNDEEP
eventsckeditor5
Lukas Kahwe Smith
Lukas Kahwe Smith

Reputation: 646

CKEditor5: add text when copying/cutting

I am trying to capture the event when a user uses copy/cut so that I can add some text at the end of the text placed into the pastebin.

On a traditional textarea I would listen to the "copy" event. On CKEditor the appropriate event seems to be clipboardOutput.

But I am not clear now how to hook into CKEditor specific events and how to integrate into output pipeline.

Would appreciate some pointers.

I have the editor running with this code:

ClassicEditor
    .create( document.querySelector( '#editor' ), { } )
    .catch( error => {
        console.error( error );
    } );

I tried adding this code below but it doesn't seem to trigger

ClassicEditor.model.document.on( 'clipboardOutput', (eventInfo, data) => {
    console.log(eventInfo, data);
} );

Upvotes: 1

Views: 633

Answers (1)

Niegowski
Niegowski

Reputation: 11

The clipboardOutput event is fired on view.Document instance.

You could use UpcastWriter to modify view.DocumentFragment provided in data.content property of the event data.

Example:

editor.editing.view.document.on( 'clipboardOutput', ( eventInfo, data ) => {
    const writer = new UpcastWriter( editor.editing.view.document );

    const paragraph = writer.createElement( 'p', null, [
        writer.createText( 'foobar' )
    ] );

    writer.appendChild( paragraph, data.content );
} );

Upvotes: 1

Related Questions