DocumentEditor - Copy/Paste from outside the browser

[Cezary Szacherski]

Hello,
I have a problem with DocumentEditor control in Angular. I'am trying to handle copying/pasting for example from MS Word application but I can't find enough documentation/information about this functionality so I have a few questions: 

1.Where I can find some sample code/sample application or any documentation which is connected with copy/paste functionality from outside the browser? (What's more your sample -> LINK  is not working for me also - after pasting text copied from MS Word there is infinite spinner)
2. To handle that functionality do we need some extra backend implementation?

3. Is SSL needed in application which has this control implemented to get it working properly? (we've set up SSL)

4. Do we need any special configuration on client browsers (Chrome, Firefox) to get it working ?

Thank you for any help !

[Harini Chellappa]

Hi Cezary, 

Syncfusion Greetings! 

In Document editor, we have a property called enableLocalPaste. This property decides to switch between the local copied content in document editor and clipboard content on paste. 

Property	DocumentEditorContainer component	DocumentEditor  component
enableLocalPaste(default value)	true	false

 

 

When the property is true, outside content i.e. clipboard contents cannot be pasted in document editor. If it sets to false, you can paste outside contents in document editor. 

Please refer the below documentation for more details. 

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

if you are using document editor container, then by default enableLocalPaste will be set to true and local copied contents alone will be pasted. In toolbar, we have “Local Clipboard” option.  

 

By toggling this option in toolbar, enableLocalPaste property will be toggled.  

You can also set this property to false on document editor container component. 

 

Please refer the below sample link 

https://stackblitz.com/edit/angular-kv2rxc-n3zlmp?file=app.component.html 

To handle that functionality do we need some extra backend implementation?	Yes. Pasting outside contents in document editor involves server communication.  In server side, please ensure to add systemclipboard web API in controller.  https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/blob/master/ASP.NET%20Core/src/Controllers/DocumentEditorController.cs#L109  Please refer the following GitHub source for web services platform-wise.  ASP.NET CORE   https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/ASP.NET%20Core   ASP.NET MVC   https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/ASP.NET%20MVC
Is SSL needed in application which has this control implemented to get it working properly? (we've set up SSL)	No. there is no need for SSL to get it work.
Do we need any special configuration on client browsers (Chrome, Firefox) to get it working?	There is no other special configuration needed in browsers.

 

Regards, 

Harini C 

[Cezary Szacherski]

Thank you for your answer, it helped me a lot. But I have one more question - is there possibility to add custom headers to request which is send to server after pasting.
Our backend API needs some extra header information to properly work with request.

[Harini Chellappa]

Hi Cezary, 

Yes, it is possible to add custom headers. 

For that you can set header information in headers property. Please refer the below documentation. 

https://ej2.syncfusion.com/angular/documentation/api/document-editor-container#headers 

https://ej2.syncfusion.com/angular/documentation/api/document-editor#headers 

Sample Code Snippet 

documentEditorContainerInstance.headers = [{‘Custom-Header’ : ‘Token2’  }]; ; 

documentEditorInstance.headers =  [{‘Custom-Header’ : ‘Token2’  }]; 

Sample link 

https://stackblitz.com/edit/angular-ygkgoe-rlapre?file=app.component.ts 

Please let us know if you need any further assistance. 

Regards, 

Harini C 

[???]

https://stackblitz.com/edit/angular-kv2rxc-n3zlmp?file=app.component.ts  

Can't read properties of undefined (reading 'length') At Editor. getBlocks (ej2 document editor. es5. js: 64035:55) error will be reported when pasting

  

[Kavitha Muralitharan]

Hi,

We noticed that you are using a very old version. We recommend you upgrade both client and server side to the latest version (v21.2.10) packages. Please upgrade and try on your end. Please cross-check the given sample below and let us know if you need any further assistance.

NPM Link: (Client-side)

https://www.npmjs.com/package/@syncfusion/ej2-documenteditor

https://www.npmjs.com/package/@syncfusion/ej2-angular-documenteditor

NuGet link: (Server-side)

https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.Core/

​https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.MVC5/

Sample Link (latest): https://stackblitz.com/edit/angular-yes1cx?file=src%2Fmain.ts

Regards,

Kavitha M