1. Home
  2. Forum
  3. React - EJ 2
  4. Error: documentEditor is undefined

Error: documentEditor is undefined

Hi Team, 
I am new bee here. Integrating the document editor from the following link. 

I am able to view the document editor. But its always showing the documentEditor is undefined message to add the another properties. Can you help me on this. 



Following is my js file content.... 

TIA. 



import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
/**
 * Initilaize RichTextEditor from React element
 */
//import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { DocumentEditorContainerComponent, Toolbar, SfdtExport } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar, SfdtExport);
import { TitleBar } from './title-bar';
import { SampleBase } from './sample-base';

class EditorView extends SampleBase {

    constructor() {
        super(...arguments);
        this.hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';
        this.container = DocumentEditorContainerComponent;
        this.onLoadDefault = () => {
            //this.container.documentEditor.open(GETTTING_STARTED);
            this.container.documentEditor.documentName = 'Getting Started';
            this.titleBar.updateDocumentTitle();
            this.container.documentEditor.documentChange = () => {
                this.titleBar.updateDocumentTitle();
                this.container.documentEditor.focusIn();
            };
        };
    }

    state = {
        open: false,
        value: ''
    }

    

    componentDidMount() {
        try {
            this.container.serviceUrl = this.hostUrl + 'api/documenteditor/';
            this.container.documentEditor.pageOutline = '#E0E0E0';
            this.container.documentEditor.acceptTab = true;
            this.container.documentEditor.resize();
            this.titleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), this.container.documentEditor, true);
            this.onLoadDefault();          
        }
        catch (ex) {
            console.log(ex)
        }
    }

    componentWillReceiveProps(nextProps) {
        try {
            
        }
        catch (ex) {
            console.log(ex)
        }
    }


    setError = () => {

    }    
      

    render() {
             
        return (
            div className={this.props.className || 'col-12'}
                div className='control-pane'
                    div className='control-section'
                        div id='documenteditor_titlebar' className="e-de-ctn-title">
                        div id="documenteditor_container_body"
                            DocumentEditorContainerComponent id="container" ref={(scope) => { this.containerComponent = scope; }} style={{ 'height': '590px' }} enableLocalPaste={true} enableToolbar={true} enableSfdtExport={true} enablePrint={true} />
                       
                   
               
           
        )
    }    
}

export default EditorView;



11 Replies
SM Suriya Murugan Syncfusion Team July 30, 2019 05:24 PM UTC

Hi Naren, 

Thank you for contacting the Syncfusion support. 

We have validated your code snippet. The reported error because of this in componentDidMount method refer to EditorView class. Instead of componentDidMount , renderComplete method is called.

Can you please check the below sample it helps you to resolve this error. 
 

Regards, 

Suriya M. 


NA Naren July 31, 2019 09:52 AM UTC

Thank you so much for the quick response. It worked.  I am able to render the control and use it. 

Is there a way to download it as PDF something like document download.  I didn't find anything in UI with the save function having the .pdf extension.



SM Suriya Murugan Syncfusion Team August 1, 2019 09:41 AM UTC

Hi Naren, 
To export the document as PDF, We can convert the word document in to PDF by using ‘Syncfusion.DocToPDFConverter’ server-side library. 
In client side, using saveASBlob method, you can convert the Word document as blob stream and then stream to server. In server side, using ‘Syncfusion.DocToPDFConverter’, you can convert the stream to pdf document and save it.          
For your convenience, we have prepared the sample. 
In above sample, on Save as Pdf button click, document will save in wwwroot/files folder. 
You can customize it based on your requirement.  
Note: Provided sample is in ASP.NET Core platform. We can create the same as Web API application for using from client side.  
Regards, 
Suriya M. 


NA Naren August 2, 2019 12:53 PM UTC

Thanks Suriya, 

I have managed to achieve this on the server side based on the links you have provided. But it showing following message on top of the page
"Created with a trial version of Syncfusion Essential PDF". 
I have spoke with your team and got a message like free with community version with some terms and conditions. Can you provide steps for integrating the license or removing the above message. 

TIA

SM Suriya Murugan Syncfusion Team August 5, 2019 07:24 AM UTC

Hi Naren, 
To remove trial message, include a license key in your projects. Refer the link to learn about generating and registering Syncfusion license key in your application to use the components without trail message. 
Add the below code in Startup.cs file: 
//Register Syncfusion license 
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); 
  
Please refer below link for further reference: 
Regards, 
Suriya M. 


NA Naren September 3, 2019 03:23 PM UTC

Hi Suriya, 


Is there any template engine in .Net core. I am looking for a functionality that will replace the text or parameters in the document editor. For examples

I have list of parameters, I am going to insert as text in the document editor like '{%Name%}'. Whenever I am loading the data to the document this has to be replaced with the original name value from an object. 


SM Suriya Murugan Syncfusion Team September 4, 2019 11:02 AM UTC

Hi Naren, 
 
Can you please confirm your requirement related to mail merge?

Please check below KB for reference: 
  
  
In above mail merge, we can insert the field from the list of parameter collection using insertField API in editor. 
  
Using Syncfusion Docio, we are performing mail merge i.e bind the field with value. 
  
  
Please let us know above satisfied your requirement. 
 
Regards, 
Suriya M. 


NA Naren September 6, 2019 03:11 PM UTC

Hi Suriya, 
I am getting following error Error getting value from 'Font' on 'Syncfusion.DocIO.DLS.WCharacterFormat'. While converting Syncfusion.DocIO.DLS.WordDocument to json. 

Following is the code... 

//stream generated from IFormFileCollection
Syncfusion.DocIO.DLS.WordDocument wordDocument = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Docx);

wordDocument.EnsureMinimal();
                //Sets page margins to the last section of the document
                wordDocument.LastSection.PageSetup.Margins.All = 72;

                wordDocument.LastParagraph.AppendText("\nFirstName: ");
                wordDocument.LastParagraph.AppendField("FirstName", FieldType.FieldMergeField);

                string[] fieldNames = new string[] { "FirstName" };
                string[] fieldValues = new string[] { "Its after replacing" };
                
wordDocument.MailMerge.Execute(fieldNames, fieldValues);
wordDocument.Dispose();
 string json = Newtonsoft.Json.JsonConvert.SerializeObject(wordDocument);

Can't we convert directly from document to JSON ?



SM Suriya Murugan Syncfusion Team September 9, 2019 10:39 AM UTC

Hi Naren, 
 
To convert document into json , please check below code snippet for your reference. 
1.      Perform mail merge operation in Syncfusion DocIO. 
2.      Save the document. 
3.      Convert the saved document to SFDT string.
  
WordDocument document = new WordDocument(stream, Syncfusion.DocIO.FormatType.Docx); 
Stream stream1 = new MemoryStream(); 
document.MailMerge.RemoveEmptyGroup = true; 
string[] fieldNames = new string[] { "FirstName" }; 
string[] fieldValues = new string[] { "Its after replacing" }; 
//Execute mail merge 
document.MailMerge.Execute(fieldNames, fieldValues); 
  
document.Save(stream1, Syncfusion.DocIO.FormatType.Docx); 
string sfdtText = ""; 
  
EJ2WordDocument document = EJ2WordDocument.Load(stream1, Syncfusion.EJ2.DocumentEditor.FormatType.Docx); 
sfdtText = Newtonsoft.Json.JsonConvert.SerializeObject(document); 
document.Dispose(); 
// Open the return string in DocumentEditor open method 
return sfdtText; 
  
Also, check MailMerge method in below sample link for reference.
  
 
Regards, 
Suriya M. 


NA Naren September 11, 2019 04:28 PM UTC

Thanks for the update Suriya. It did the trick.

I have other requirements. Can you help me out on this or any other alternative is appreciated,
1) Requirement: Sending document content in the email body without changing the styles and document content.

Can we convert Document to pure HTML. So, that I can use this HTMLto send in Email body with the same format.


2) Can we load the document from json string. That was created from the following code 

           WordDocument document = WordDocument.Load(processTuple.Item1, GetFormatType(processTuple.Item2.ToLower()));
            string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);

I will be saving the above json in database. In a new request, after fetching the data from database in server side, I will modifying some styles and content and convert back to HTML format. 



SM Suriya Murugan Syncfusion Team September 12, 2019 10:36 AM UTC

Hi Naren, 
 
Thank you for your update. 
 
Can we convert Document to pure HTML. So, that I can use this HTMLto send in Email body with the same format. 
  
Yes, you can convert the document to pure HTML using Syncfusion DocIO library. Then pass the converted html to email body. 
  
Client side in below sample code check exportAsHtml method: 
  
  
  
Server side sample code: 
  
public string DocToHtml(IFormCollection data) 
        { 
Stream stream = new MemoryStream(); 
IFormFile file = data.Files[0]; 
file.CopyTo(stream); 
stream.Position = 0; 
Syncfusion.DocIO.DLS.WordDocument wordDocument = new Syncfusion.DocIO.DLS.WordDocument(stream, Syncfusion.DocIO.FormatType.Docx);             
  
//Saves the html file 
            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;             
} 
  
  
For your convenienet we have prepared sample, kindly check it in below link: 
  
  
  
  
  
Can we load the document from json string. 
In backend, it is not possible to convert the json string to document.
  
In client side, using saveAsBlob you can convert the save the document as Docx option and get is as a blob stream and then pass that stream to server. Then proceed further for your requirement. 
  
Open the sfdt in DocumentEditor using open method and then save it using saveAsBlob method. 
  
Sample link: 
  
 
 
Please let me know if you have any questions. 
 
 
Regards, 
 
Suriya M. 


Loader.
Up arrow icon