Event for copy/paste

[Brian Kane]

Hello,

I see in the documentation how to trigger a copy or paste in code, however I'm interested in running code when the user triggers a copy or pasted. Something similar to the following:

                    <DocumentEditorContainerComponent 

                        id="container" 

                        onPaste={args => console.log(args) }

                    />

[Suriya Murugan]

Hi Brian, 

Syncfusion Greetings! 

Due to browser security limitation, we cannot access system clipboard event(cut, copy and paste) using code level. You can copy and paste within the control using copy and paste API by enabling local clipboard option.  

Please check below documentation for API details: 

https://ej2.syncfusion.com/documentation/document-editor/clipboard/#copy  

Regards, 

Suriya M. 

[Brian Kane]

To detect a copy, can we not detect "Ctrl + C" key down events? As well as add a hook into the context menu in the document editor, for when user clicks Copy? Surely this must be possible, we are doing just this in another place in our web application

[Suriya Murugan]

Hi Brian,  

Due to browser security limitation, we cannot access system clipboard event(cut, copy and paste) using API and context menu. Using keyboard shortcut only, we can access clipboard content.  

Within control, to copy and paste using API and context menu, we have used enableLocalPaste API behaviour. Please check it from below link: 

https://ej2.syncfusion.com/documentation/document-editor/clipboard/#enablelocalpaste-behaviour 

So, we cannot access the event using API and context menu. 

Please let us know if you have any questions. 

Regards,  

Suriya M.  

[Brian Kane]

I'm not talking about system copy events, I'm talking about copy events within the document editor. And the context menu I'm talking about is the one within the document editor as well - certainly this can be controlled, as it is part of Syncfusion's code. I'm referring to something along these lines (jquery example, the same could be done in native javascript):

$(document).ready(function() {
    var ctrlDown = false,
        ctrlKey = 17,
        cmdKey = 91,
        vKey = 86,
        cKey = 67;

    $(document).keydown(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
    }).keyup(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
    });
    
    // Document Ctrl + C/V 
    $(document).keydown(function(e) {
        if (ctrlDown && (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
        if (ctrlDown && (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
    });
});

There could be a prop on the DocumentEditorContainer component, "onCopy" or something like that, which accepts a callback that is called when Ctrl+C is pressed in the document. I know that the browser sandbox doesn't allow access to the system clipboard, and that is fine.

[Suriya Murugan]

Hi Brian, 

Within Documenteditor control, you cannot hook copy and paste functionality to catch. As a workaround, you can use like below: 

https://stackblitz.com/edit/paz3xu-n5b72w?file=index.js 

Which will notify when ctrl+c/v is pressed. 

Please let us know if you have any questions. 

Regards, 

Suriya M. 

[Brian Kane]

Hello, thank you that is very helpful. Is it possible to do this on the React DocumentEditorContainer component in a similar way? Additionally, is it possible to fetch the selected text when Ctrl+C is detected? Thank you again!

[Kurthis Banu Abdul Majeeth]

Hi Brian, 

We are modified the sample in react platform. kindly check below sample. 

React sample: 

https://stackblitz.com/edit/react-avp9rj-ct3vns?file=index.js 

please find the code changes in “index.js”  file (Line number 35). 

Regarding: is it possible to fetch the selected text when Ctrl+C is detected 

Document Editor don’t have support for fetch the selected text when Ctrl+C is detected.  

you can use below code snippet for fetch the selected text. 

container. documentEditor.selection.text; 

Documentation Link: 

https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode 

Please let us know if you have any questions. 

Regards,  

Kurthis Banu A.