1. Home
  2. Forum
  3. Vue
  4. Override Document Editor Paste Behavior

Override Document Editor Paste Behavior

Currently I am using a document editor container to import a Word .docx from a server which is then displayed to the user for additional editing if required which is working great. However I am running into an issue when trying to paste text sometimes. If it's unformatted, plain text, it will paste in correctly. However if I try to paste from another source, be it Word doc, PDF, website, etc. it will attempt to call the service URL to paste with formatting via the server-side "SystemClipboard" endpoint.

Given the frontend and server-side security and how http calls are made, I'd ideally like to just paste the plain text without any formatting and limit further calls to the backend. To this end and looking at the documentation, I tried overriding the @keyDown event to just call the paste() method instead of hitting the service URL but then realized that the document editor container does not have any events bubbling up to listen to.

Is it possible to do one of the below:

  1. Set the paste behavior to always just paste plain text (as a property), or
  2. Access Document Editor events from Document Editor Container

I am also open to other alternatives. Thank you for your time.

5 Replies
KB Kurthis Banu Abdul Majeeth Syncfusion Team September 10, 2021 04:16 AM UTC

Hi DT, 
 
Regarding: Set the paste behavior to always just paste plain text (as a property) 
 
We are cross checked your reported problem with MS word application. In MSWord, content get pasted without formatting. Document Editor also paste the copied content equivalent to MS word application. So, this not an issue.   
 
For your reference we have attached the screenshot in below.   
 
   



 

Regarding: Access Document Editor paste events from Document Editor Container 
 
 
We are cross checked your requirement. System Clipboard method gets triggered whenever paste the content (Ctrl +V key) with formatting in Document editor. We don’t have API to get paste Data when ctrl + v pressed.  

 
Programmatically accessing the system clipboard is restricted by browsers for security reason. Hence triggering the ctrl+v event manually and getting clipboard data is not accessible.   


Documentation Link:  
 
 
Please let us know if you have any questions.  

Regards,  
Kurthis Banu A.  


DT Doug Thierjung September 10, 2021 04:15 PM UTC

Thank you for the above. I might be misunderstanding so I think an example might better illustrate what I'm encountering. And I understand about the programmatic access to the clipboard, I'll ignore that path for now.

I've attached some snippets:

  1. Step 1 shows the blank document editor container.
  2. Step 2 shows that I am copying a portion of the URL to paste into the document editor container.
  3. Step 3 shows a successful paste (using ctrl + v).
  4. Step 4 shows a new selection that I want to copy from the webpage (this forum's page, in fact).
  5. Step 5 shows that when I try to paste  (ctrl + v) this selection (if I right click inside the document editor container, the paste option is greyed out), an attempted call is made to the backend "/SystemClipboard" which failed for security reasons (no issue with the failed call).
I'm looking to understand why the source of the selected text determines whether or not the backend server call is made. Ideally I want to avoid making the call and maybe as an option, just paste the plain text in lieu of the call.

Attachment: Snippets_623d89ea.zip

KB Kurthis Banu Abdul Majeeth Syncfusion Team September 13, 2021 06:59 AM UTC

Hi DT, 

We are cross checked your reported issue. You try to paste the formatted content, Document -Editor having support for paste with formatted text and it requires a server-side dependency.  

Paste with formatting  
For converting the HTML/RTF format (received from system clipboard) to SFDT format content. Whereas plain text received from system clipboard will be pasted directly in client-side.  


GitHub Link: 


// Run the web service then replace the service URL by running local URL.  
container.documentEditor.serviceUrl ="http://localhost:62870/api/documenteditor/"   

Documentation Link: 

Kindly ensure have you tried adding system clipboard and change running local url in your application?  

Regards, 
Kurthis Banu A. 


DT Doug Thierjung September 14, 2021 11:39 PM UTC

Hello,


I ended up just adding the backend method per the Github link which works for my purposes.


Thank you for all your time on this. Feel free to close this or mark as complete.


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 15, 2021 03:43 AM UTC

Hi DT,  

Thanks for the update.  We happy know your reported problem was resolved.  

Regards, 
Kurthis Banu A. 


Loader.
Up arrow icon