We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Decrease the npm package sizes for @syncfusion\ej2-react-documenteditor

Thread ID:





147582 Sep 17,2019 08:53 AM UTC Jan 3,2020 12:57 PM UTC React - EJ 2 7
Tags: DocumentEditor
Code Monkey
Asked On September 17, 2019 08:54 AM UTC

Hi Team, 
After installing the @syncfusion\ej2-react-documenteditor using npm, it has installed following packages in the node_modules. After running the npm it has created more than 13MB built file because of these. I have tried removing the unused files directly and its giving the dependency issues in npm run.
Is there a way to decrease or remove the unusable components from the following.

Suriya Murugan [Syncfusion]
Replied On September 18, 2019 12:46 PM UTC

Hi Narendra, 
Thank you for contacting the Syncfusion support. 
DocumentEditor Component depends on the installed packages. If you remove any of the component in install packages, it will throw dependency error.

You have to maintain all the installed packages to run DocumentEditor Component without any error.
Suriya M. 

Code Monkey
Replied On December 24, 2019 01:25 PM UTC

Any update on the package size issue ?.This package size should be minimized after building/npm run... for the build release.
Increased size will surely  increase the web page size and we cannot use this EDITOR control further if your team doesn't minimize or decrease the size. 

Harini Chellappa [Syncfusion]
Replied On December 30, 2019 10:29 AM UTC

Hi Narendra, 

From the screen shot we can able to see all the needed dependencies are installed and it’s not possible to reduce the dependencies further. 

But we need clarification on your type of using DocumentEditor in your application. Please find the comparison between the components listed below. 

DocumentEditorContainer Component 
DocumentEditor Component 
Includes all the modules and comes with predefined toolbar, property pane & status bar. 
A plain editor which requires needed functionality to be injected on the required modules you are about to view/edit using DocumentEditor 
All modules are enabled by default. So we cannot reduce the dependent files size further. 
All the needed dependencies are installed but only injected modules script will be loaded in the browser make it light weight. 
  1. Are you using DocumentEditorContainer or DocumentEditor?
  2. Can you please share your complete use case scenario on how you are going to deploy the DocumentEditor and what is the constraints and your environment?

We will check the feasibility based on your requirement and update you the details on it. 

Harini C 

Code Monkey
Replied On December 31, 2019 07:10 AM UTC

1) We are using DocumentEditorContainer. Following is the code,
<DocumentEditorContainerComponent id="container" ref={(scope) => { this.documenteditor = scope; }} style={{ 'height': '800px' }} enablePrint={true} enableWordExport={true} enableSelection={false} enableToolbar={true} />

2) We are using React and c# MVC to create a common page by extending component for the editor template. Using this as form control in entire application.  Enclosing the component (Few lines of code removed for security reasons).
Use case in my application:
- Creating a common form control or page for saving and showing the documents.
- Need to save the uploaded document  in both JSON and as HTML formats in the database.HTML format used for sending emails.
Is there any possiblity of converting to HTML in UI side?
Can you share a sample code with above requirements and reduced size will be highly appreciated.


Attachment: EditorView_aa18ce8b.rar

Harini Chellappa [Syncfusion]
Replied On January 2, 2020 12:05 PM UTC

Hi Narendra, 

Thank you for sharing the details. 

In the provided source code, DocumentEditorContainer component doesn’t have the property like “enableWordExport”,”enableSelection”. 

These properties come under DocumentEditor Component, which have the ability to inject required modules. 

And you have the following properties like 

enableSelection to false 
Editor module is dependent on selection module. If you disable selection and enable editor, then selection will be injected by default in editor module.  
Inbuilt toolbar has showcased with all supporting feature options. If you disable any of the modules, then options in toolbar which are depended on disabled modules will not work. 

Note: We cannot remove or add any options in toolbar. currently document editor container doesn’t provide support to customize toolbar. 
Word export is dependent on SFDT export module. Hence injecting this alone will not work. 
We have prepared a simple sample with following options 

  1. File opening.
  2. Editing.
  3. Export (word, SFDT).
  4. Print.

Sample Link 

Sample Code 

import { DocumentEditorComponent, Print, Selection, Editor, WordExport, SfdtExport } from '@syncfusion/ej2-react-documenteditor'; 
import { DocumentLoader } from './document-loader'; 
import { TitleBar } from './title-bar'; 
import { StatusBar } from './status-bar'; 
DocumentEditorComponent.Inject(Print, Editor, WordExport, SfdtExport); 
  <DocumentEditorComponent id="container" ref={(scope) => { this.documenteditor = scope; }} enablePrint={true} enableEditor={true} isReadOnly={false} enableWordExport={true} enableSfdtExport={true} style={{ width: '100%', height: '100%' }}/> 
In the above code, we have enabled print, editor, export. Likewise required modules can be enabled in document editor component, which will the reduce the script weightage. But inbuilt toolbar and properties pane will not be available in DocumentEditor component. This has to be managed independently via sample.  

You can also create the customized toolbar on your own. Please refer the following documentation for more details on it. 

If your requirement is on specific modules, then you can go with document editor component, where you can reduce the script weightage. 

Else if you need all the modules, then its dependencies cannot be reduced further. 

Please let us know if you need any further assistance 

###Regarding converting to HTML in UI side 
Currently document editor doesn’t provide support for converting to html in client side. This can be achieved with the help of DOCIO or Word Editor in server side.  

  1. using DocIO
You can pass the document content as blob from client side and send this to server.  
Please refer the below documentation, which explains how to send the document blob to server side and saving it as RTF.  
wordDocument.Save(stream, FormatType.Rtf); 
Here instead of RTF, you can set formatType to html.  
wordDocument.Save(stream, FormatType.Html);
  1. using word editor package

you can serialize the document content as SFDT and then pass it to server side for saving. 
Please refer the below documentation. 
you can change the format type from docx to html for html export. 
Please check the above documentations for html conversion and let us know if this helps you. 

Harini C 

Code Monkey
Replied On January 2, 2020 12:54 PM UTC

Hi Harini. Thanks for the response. 
While converting the sfdt to HTML using following line of code, an error is triggering. (Using the latest nuget packages)
wordDocument.Save(stream, FormatType.Html);

Following is the service implementation code for converting to html.
public string GetHTML(HttpPostedFile file, int id)
        int index = file.FileName.LastIndexOf('.');
        string doctype = index > -1 && index < file.FileName.Length - 1 ?
            file.FileName.Substring(index) : ".docx";
        Stream stream = file.InputStream;             

        stream.Position = 0;
        Syncfusion.DocIO.DLS.WordDocument wordDocument = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Html);                
        wordDocument.Save(stream, Syncfusion.DocIO.FormatType.Html);              
        stream.Position = 0;
        //Now, converting the stream to string 
        StreamReader reader = new StreamReader(stream);
        string text = reader.ReadToEnd();
        // Now, you set this html string to email body
        return text;                 
    catch (Exception ex)

        throw ex;

ERROR: Specified method is not supported.
  at System.Web.HttpInputStream.SetLength(Int64 length)
   at Syncfusion.DocIO.DLS.WordDocument.SaveInternal(Stream stream, FormatType formatType)
   at Delasoft.ROWMS.BusinessServices.DataServices.SyncEditorServices.GetHTML(HttpPostedFile file, Int32 id)

Harini Chellappa [Syncfusion]
Replied On January 3, 2020 12:57 PM UTC

Hi Narendra, 

We have checked your provided source code. You have used the same stream for reading the word document and saving in html format. This causes the exception. 

To resolve this error, you can create new stream for saving the content in html format. Since stream has already read. 

Please refer the below sample code snippet. 

  System.Web.HttpPostedFile data = HttpContext.Current.Request.Files[0]; 
            //Opens document stream 
            WordDocument wordDocument = new WordDocument(data.InputStream); 
            MemoryStream stream = new MemoryStream(); 
            //Converts document stream as HTML 
            wordDocument.Save(stream, FormatType.Html); 
            stream.Position = 0; 
            StreamReader reader = new StreamReader(stream); 
            string text = reader.ReadToEnd(); 
            // Now, you set this html string to email body 
            return text; 
Please check the above and let us know if this helps you. 

Harini C 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon