1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Document editor documentation outdated?

Document editor documentation outdated?

Hey Guys,

I'm trying to add the DocumentEditor to my Page, but the Documentation seems a little broken.

There are a lot of Functions that are not working anymore or not the same way.

So I just want to open some WordDocuments, which are coming from Blob storage or the FileSystem.
But every time I try to open the word document I get the Error:

Also, I don't know, why I have to use the UndefinedImport method instead of the Import Method.

So can you please provide me a full working example with Word Import working?


Thank you very much.

Regards  



16 Replies
KB Kurthis Banu Abdul Majeeth Syncfusion Team August 25, 2021 07:14 AM UTC

Hi Chris, 

We suspect that the reported issue might be due to you have used DocIO instance for open.  

Kindly change your code like below code snippet to resolve your reported issue.  
 
Code snippet:  
Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, GetFormatType(type.ToLower()));  


For your reference, we have attached the Sample and it can be downloaded from the below link.   

Sample Link: 

Please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


CH Chris August 25, 2021 08:58 AM UTC

Thanks for your code snippet, it worked like charm.


But I have another problem now:

Is this implementation correct?

If not can you provide a UI example in the Project you shared, please?


when I try to export my .Docx as a blob, there is an error message when I try to do this only with the document container, and a wrong styled document when I use the document editor:



So my final goal is, that a user can upload a .Doc or .Docx File, modify it and then save it in our blob storage.


thanks for your help :-)


KB Kurthis Banu Abdul Majeeth Syncfusion Team August 26, 2021 04:07 AM UTC

Hi Chris,   

Kindly share us your front-end platform details. That will be helpful for us to investigate further and provide you the solution at the earliest.  

Regards, 
Kurthis Banu A. 


KB Kurthis Banu Abdul Majeeth Syncfusion Team August 26, 2021 07:55 AM UTC

Hi Chris,  

We have prepared the sample based on your requirement. Please find the sample in below links.  

Client-side angular sample: 

Server side ASP.Net core sample: 


Kindly refer the below documentation Link for your reference. 

Documentation Link: 
Server-side Export: 
 
DocumentEditorContainer Component: 


We need some clarification regarding your shared code. In default “Document editor container” having “Document editor “. So, could please explain in detail for you have used Document editor inside the Document editor container? 

Regards, 
Kurthis Banu A. 


CH Chris August 26, 2021 12:30 PM UTC

Hey Kurthis,


Well, how should I explain, I don't know which object I have to take for the Document editor.

It seems they both do the same, but the ejs-documenteditor does not work (because always showing me this empty scrollable square) but the container is working as expected and I can import a .Docx file there.

So I thought, the container must contain the normal editor, what is wrong, I found out ;-)


Then I tried to do all the stuff I need with the ejs-documenteditorcontainer, but there in the JS the method 
saveAsBlob is not available for this object.

Now the biggest problem I have is, how to access the saveAsBlob, in the ejs-DocumentEditorContainer?

My Code looks like this:

EditTemplate.cshtml

<div class="control-section">

    <ejs-button id="export" content="Export"></ejs-button>

    <div id="documenteditor">

        <ejs-documenteditorcontainer id="container" height="900px"></ejs-documenteditorcontainer>

    </div>


    <style>

        #documenteditor_titlebar {

            height: 36px;

            line-height: 26px;

            width: 100%;

            font-size: 12px;

            padding-left: 15px;

            padding-right: 10px;

            font-family: inherit;

            background-color: #D37878;

        }


        #documenteditor_title_contentEditor {

            height: 26px;

            max-width: 85%;

            width: auto;

            overflow: hidden;

            display: inline-block;

            padding-left: 4px;

            padding-right: 4px;

            margin: 5px;

        }

    </style>

</div>


<script>


        var DocumentEditorContainer;

        var DocumentEditorContainerInstance;


        document.addEventListener('DOMContentLoaded', function () {


            DocumentEditorContainer = document.getElementById("container");

            DocumentEditorContainerInstance = DocumentEditorContainer.ej2_instances[0];

            DocumentEditorContainerInstance.resize();


            document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt');


            document.getElementById('file_upload').addEventListener("change", function (e) {

                if (e.target.files[0]) {

                    var file = e.target.files[0];

                    if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {

                        loadFile(file);

                    }

                }

            });


            function loadFile(file) {

                var ajax = new XMLHttpRequest();

                ajax.open('POST', "@Url.Action("Import", "TemplateManagementEditor", new { area = "FileManagement" })", true);

                ajax.onreadystatechange = function () {

                    if (ajax.readyState === 4) {

                        if (ajax.status === 200 || ajax.status === 304) {

                            // open SFDT text in document editor

                            documenteditor.open(ajax.responseText);

                        }

                    }

                }

                var formData = new FormData();

                formData.append('files', file);

                ajax.send(formData);

            }

        });


        document.getElementById('export').addEventListener('click', function () {

            debugger;

            documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {

                // The blob can be processed further

            });


            documenteditorContainer.saveAsBlob('Docx').then(function (exportedDocument) {

                // The blob can be processed further

            });

        });


    </script>


TemplateManagementController.cs


[AcceptVerbs("Post")]

        public string UndefinedImport(IFormCollection data)

        {

            if (data.Files.Count == 0)

                return null;

            Stream stream = new MemoryStream();

            IFormFile file = data.Files[0];

            int index = file.FileName.LastIndexOf('.');

            string type = index > -1 && index < file.FileName.Length - 1 ?

                file.FileName.Substring(index) : ".docx";

            file.CopyTo(stream);

            stream.Position = 0;


            Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, (Syncfusion.EJ2.DocumentEditor.FormatType)GetFormatType(type.ToLower()));

            string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(document);

            document.Dispose();

            return sfdt;

        }


[AcceptVerbs("Post")]

        [HttpPost]

        [EnableCors("AllowAllOrigins")]

        [Route("SaveDocument")]

        public string SaveDocument([FromBody] SaveParameter data)

        {

            Stream document = WordDocumentS.Save(data.content, FormatTypeS.Docx);

            FileStream file = new FileStream("sample.docx", FileMode.OpenOrCreate, FileAccess.ReadWrite);

            document.CopyTo(file);

            file.Close();

            document.Close();

            return "";


        }


        public class SaveParameter

        {

            public string content { get; set; }

        }





SM Suriya Murugan Syncfusion Team August 27, 2021 05:01 AM UTC

Hi Christoph, 
 
Please check below KB link in which we have used saveAsBlob method to send document to server: 
 
 
 
Please let us know if you have any questions. 
 
Regards, 
Suriya M. 


CH Chris replied to Suriya Murugan August 27, 2021 09:15 AM UTC

Wow nice, this one helped me a lot :-)

I took everything one to one into my application, but there is still a problem and I don't know how to solve it.

Every time I try to load or save a file (the action buttons), I get a JS error:


Do you have any clue, if this error is Syncfusion based or not?

And if yes why does this appear to me?

When I remove my whole _Layout and replace it with the basic one, everything works as it should.


KB Kurthis Banu Abdul Majeeth Syncfusion Team August 30, 2021 08:13 AM UTC

Hi Chris,  

Reported issue has been resolved in our latest release v19.2.57 (both client and server side), can you please check and let you know if this resolves at your end with the upgraded package?   

Regards,  
Kurthis Banu A.  


CH Chris August 30, 2021 02:42 PM UTC

Hey Kurthis,


Sadly it won't fix my problem.

Any ideas?


Tanks a lot to you.

Regards


KB Kurthis Banu Abdul Majeeth Syncfusion Team August 31, 2021 08:08 AM UTC

Hi Chris,  

We are tried to reproduce the reported problem our end. We couldn’t reproduce it our end. 

 For your reference, we have attached the Sample which we used to reproduce the reported issue and it can be downloaded from the below link. 

Client-side angular sample:  

Server side ASP.Net core sample:  
   
If you are facing any issue in above sample. Please share us the below things at your end: 
1.            Input Word documents which used at your end. 
2.            Syncfusion product version which you are using in your application. 
3.            Video demonstration of the reported problem. 

This will be more helpful to reproduce the same issue at our end. Thereby, we will proceed further on the reported issue and provide you the appropriate solution at the earliest. 

Note: If you have any confidential data in your document, please replace with some dummy data and provide us the same. We just need your document to recreate the problem you face. 

Please let us know if you have any other questions. 

Regards,  
Kurthis Banu A.  


CH Chris August 31, 2021 12:18 PM UTC

Hey Kurthis,


Sadly, I can't reproduce it with your stackbliz example, also when I create an Example Project and have the minimum in there, everything works fine.

And when I remove our whole _Layout (except basic header body etc.) everything works great in our Project.

So sadly I can't send you the project, but I recorded the Event in a Video attached to the File and the Versions as well.


If you support some screen sharing or MS teams or something, let me know.


Regards




Attachment: Files_b870df58.zip

CH Chris replied to Christoph Zürcher August 31, 2021 02:36 PM UTC

I found out when I remove the following code from my _Layout file, everything works fine, have you another method to localize all the Syncfusion objects?

Regards


<script>


            @{

                var pathBase = "";

                if (Context.Request.PathBase.HasValue)

                {

                    pathBase = Context.Request.PathBase;

                }

                var path = $"{Context.Request.Scheme}://{Context.Request.Host}{pathBase}";

            }


            var baseAppUrl = '@path';


            var shortLng = _global.currentCulture.substr(0, 2);


            var ajax = new ej.base.Ajax(baseAppUrl + '/ej2-locale/' + shortLng + '.json', 'GET', true);

                ajax.send().then(function(e) {

                    var culture = JSON.parse(e);

                    ej.base.L10n.load(

                        culture

                    );

                    //Set the culture for the EJ2 components

                    ej.base.setCulture(shortLng);

                });


            document.addEventListener('DOMContentLoaded', function () {

                loadCultureFiles();

            });


            function loadCultureFiles() {

                var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];


                var shortLng = _global.currentCulture.substr(0, 2);


                var loader = ejs.base.loadCldr;

                var loadCulture = function (prop) {

                var val, ajax;

                    ajax = new ejs.base.Ajax('/cldr-data/main/' + shortLng + '/' + files[prop], 'GET', false);


                ajax.onSuccess = function (value) {

                    val = value;

                };

                ajax.send();

                loader(JSON.parse(val));

                    ejs.base.setCulture(shortLng);

                };

                for (var prop = 0; prop < files.length; prop++) {

                    loadCulture(prop);

                }

            }


        </script>


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 1, 2021 01:46 PM UTC

Hi Chris,  

Kindly refer the below code snippet to achieve your requirement. 

Code snippet: 
import { L10n } from '@syncfusion/ej2-base'; 
 
 
L10n.load({ 
  'ar-AE': {    // you can give your locale value here  
    documenteditor: { 
      
    }, 
    documenteditorcontainer: { 
    } 
  } 
}); 
 
 
<ejs-documenteditorcontainer ref='documenteditor' id='container'  :enableToolbar='true'  
locale='ar-AE'></ejs-documenteditorcontainer> 
 
 

To get locale value from below GitHub link:  
  
Documentation Link:  

Demo sample: 

Regards, 
Kurthis Banu A. 


CH Chris May 31, 2022 08:23 AM UTC

Sadly this way doesn't seem to work. We are using the ej2-locale json files from your GitHub. We load the corresponding culture like this in the site.js:

$(document).ready(function () {

    var ajax = new ej.base.Ajax(_global.path + '/ej2-locale/' + _global.currentLang + '.json', 'GET', true);

    ajax.send().then(function (e) {

        var culture = JSON.parse(e);

        ej.base.L10n.load(

            culture

        );

        //Set the culture for the EJ2 components

        ej.base.setCulture(_global.currentLang);

    });

});

 

Now if we set the locale of the Documenteditor manually to the language like above (_global.currentLang) the Documenteditor is functioning, but not localized. If we don't set the locale manually, the Documenteditor is localized, but not functioning. 

The Problem seems to be that the variable documenteditor which was set in the created method, only contains the correct documenteditor object (with functioning search and serviceUrl etc) if the locale was manually set to the one in the JS. 

I managed to make it work in most cases by newly getting the Documenteditor in every Js Function that needs the Documenteditor like this: 

function getDocumentEditor() {

            var container = document.getElementById("container").ej2_instances[0];

            var editor = container.documentEditor;

            return editor;

        }

This works in almost every case, apart from the initial File Import. There the File gets opened, but some code in ej2.min.js seems to make it disapear again:


Before documenteditor.open(httpRequest.responseText);



Immediately After documenteditor.open(httpRequest.responseText);


After clicking resume Script execution, No Errors appear in the Developer console and the Document is blank:


This only happens on the Initial Import, when we select a Template like this it works without any Problems:

function onSelect(args) {

            documenteditor = getDocumentEditor();

            console.log(args);

            var fileName = args.itemData.Source;

            var httpRequest = new XMLHttpRequest();

            httpRequest.open('Post', '/api/DocumentEditor/ImportFile', true);

            httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

            httpRequest.onreadystatechange = function () {

                if (httpRequest.readyState === 4) {

                    if (httpRequest.status === 200 || httpRequest.status === 304) {

                        documenteditor.open(httpRequest.responseText);

                    }

                    else

                    {

                        aoosHelper.showToast("@Localizer.GetString(LocalizationKeys.Error)", "@Localizer.GetString(LocalizationKeys.DocumentLoadFailure)", 4, true);

                    }

                }

            };

            httpRequest.send(JSON.stringify({ "fileName": fileName }));

        }


Regards


SM Suriya Murugan Syncfusion Team June 2, 2022 04:22 AM UTC

We will check and update details shortly.


SM Suriya Murugan Syncfusion Team June 6, 2022 04:07 AM UTC

Hi Chris,


Can you please share the simple sample which you have tried at your end? that will be helpful for us to investigate and provide you the solution at the earliest.


Regards,

Suriya M.


Loader.
Up arrow icon