Save changes in Document Editor

Question

Hi,Is it possible to save changes in the document editor? Not to download them as a new document file, but to edit the existing?

Prakash Kumar D · Answer

Hi Lajos,Thank you for contacting Syncfusion support.Yes, you can save the document in our Document editor instead of download as new file by two ways. 
 




Client-side 

‘DocumentEditor’ class provides ‘serialize()’ method which returns the document as SFDT (Syncfusion Document Text). You can reopen this document anytime using ‘open(sfdt: string)’ method of DocumentEditor for further editing. 


Server-side 

‘DocumentEditor’ class provides ‘saveAsBlob(FormatType.Docx)’ method which returns the document as DOCX blob. You can pass this blob to server through web service API and store them in database based on your requirement. 
 
Regards, 
Prakash Kumar

Lajos Djerfi · Answer

Can you please provide me with an example?

Prakash Kumar D · Answer

Hi Lajos, 
 
Thank you for contacting Syncfusion support. 
 
We have prepared a Vue application as per your requirement. Please find the sample from following link. 
http://www.syncfusion.com/downloads/support/forum/139588/ze/DocumentEditor_LoadSave1402431591 
 
Please find the steps to run this application. 
Step 1: npm install 
This will install all the necessary pacakges required for the application. 
 
Step 2: npm run dev 
This will launch the application in browser. 
 
In this sample, we have maintained the data source as JSON object with document name as key and corresponding SFDT as value. Kindly refer to see how save operation is handled here. 
 





Save the document as SFDT 

    saveBtnClick: function () { 
      let sfdt = vm.$refs.documenteditor.ej2Instances.serialize(); 
      let fileName = vm.$refs.documenteditor.ej2Instances.documentName === '' ? 'Untitled Document' : vm.$refs.documenteditor.ej2Instances.documentName; 
      vm.$refs.jsonData[fileName] = JSON.parse(sfdt); 
      this.updateTemplateDropDown(); 
    }, 
  
 
Regards, 
Prakash Kumar.

Lajos Djerfi · Answer

Hi,Now I have a problem when I want to save a larger document.When I use this code, I cant see the changes in my console, but when I use a smaller document it works fine.    saveBtnClick: function () {       let sfdt = vm.$refs.documenteditor.ej2Instances.serialize();         console.log(sfdt);      let fileName = vm.$refs.documenteditor.ej2Instances.documentName === '' ? 'Untitled Document' :vm.$refs.documenteditor.ej2Instances.documentName;       vm.$refs.jsonData[fileName] = JSON.parse(sfdt);       this.updateTemplateDropDown();     }, Could you tell me what code can i use to get "full" json document?

Arumuga Perumal S · Answer

Hi Lajos,Thank you for your update.The ‘serialize()’ method of DocumentEditor returns the SFDT as string whereas ‘save(‘fileName’, ‘Sfdt’)’ downloads the SFDT as file.We have added this sample in stackblitz. Please find the link here.Could you please create a new incident for this issue using this link and share us the input document through it so that we can investigate further and provide you with appropriate solution at the earliest?Regards,Arumuga Perumal S.

Jim OQuinn · Answer

I realize this is a rather old thread, but should these 
stackblitz.com examples work?  I can't get any of them to work in the stackblitz.com environment.  Only a blank page shows up.Thanks,Jim

Ajithamarlin Edward · Answer

Hi Jim, 


Currently we are working on the requested sample. 
  
Meanwhile you can refer our documentation. 
  
https://ej2.syncfusion.com/vue/documentation/getting-started/vue-cli/ 
  
Documentation on export. 
  
https://ej2.syncfusion.com/vue/documentation/document-editor/export/ 
  
We will provide the requested sample on June 22, 2020. 



Regards, 
Ajithamarlin E.

Harini Chellappa · Answer

Hi Jim, 

Thank you for your patience. 

We have prepared the sample to save the document editor content as SFDT string and added it to dropdown items with document name. once dropdown item is selected, corresponding sfdt string will be opened in document editor. 

  

Document editor content which are saved on pressing save button, will be added as a new item in choose dropdown. 
  

Kindly download the sample from below link and let us know whether this satisfies your requirement. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DocumentEditorVueSave-1767183029  

you can also refer the below documentation on exporting document editor contents. 

https://ej2.syncfusion.com/vue/documentation/document-editor/export/  

Regards, 

Harini C

Client-side	‘DocumentEditor’ class provides ‘serialize()’ method which returns the document as SFDT (Syncfusion Document Text). You can reopen this document anytime using ‘open(sfdt: string)’ method of DocumentEditor for further editing.
Server-side	‘DocumentEditor’ class provides ‘saveAsBlob(FormatType.Docx)’ method which returns the document as DOCX blob. You can pass this blob to server through web service API and store them in database based on your requirement.