Unable to view document in word editor properly

Hello I am trying to view the word/excel/ppt document in Groupdocs editor using asp.net mvc(web api, jQuery, JavaScript) like how it is working →
Word Editor, Excel Editor, PowerPoint Editor

Below is my code for the same,

my cshtml Page →

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateOfficeFiles</title>
</head>
<body>
    <div>
        <textarea name="htmlContent" style="width:100%; height:500px;">@Html.Raw(ViewBag.HtmlContent)</textarea>
    </div>
</body>
</html>

my controller

public async Task<ActionResult> CreateOfficeFiles(string queryString)
{
    Utils.AES256 aes = new Utils.AES256();
    var queryData = aes.DecryptQueryStringAsObject(queryString);
    var fileuploadPath = System.IO.Path.Combine(Program.GetTempFolderPath(), "FileUpload");
    string fullFilePath = queryData.FilePath;
    if (string.IsNullOrEmpty(queryData.FilePath))
    {
        var guid = Convert.ToString(Guid.NewGuid());
        if (queryData.EditorType == "docx")
        {
            fullFilePath = fileuploadPath + "\\" + guid + ".docx";
            await CreateEmptyWordFile(fullFilePath);
        }
        else if (queryData.EditorType == "xlsx")
        {
            fullFilePath = fileuploadPath + "\\" + guid + ".xlsx";
            await CreateEmptyExcelFile(fullFilePath);
        }
        else if (queryData.EditorType == "pptx")
        {
            fullFilePath = fileuploadPath + "\\" + guid + ".pptx";
            await CreateEmptyPPTFile(fullFilePath);
        }
    }

    SPResponse sp = await LoadWordFile(fullFilePath);
    ViewBag.HtmlContent = sp.Ref1.ToString();
    return View();
}

CreateEmptyWordFile, CreateEmptyExcelFile, CreateEmptyPPTFile is an API call to my Groupdocs application which is helping me to create empty word/excel/ppt files if queryData.FilePath is empty.

here is my code for the same →

[HttpPost]
[Route("api/GroupDocsApi/CreateEmptyWordFile")]
public async Task<SPResponse> CreateEmptyWordFile(DocPro.DMS.BusinessEntities.Request.GroupDocs.GetDocumentInfoRequest request)
{
    try
    {
        Document document = new Document();
        await Task.Run(() => document.Save(request.FileUploadPath));
        return new SPResponse() { ReturnStatus = "0" };
    }
    catch (Exception ex)
    {
        return new SPResponse() { ReturnStatus = "-1", ReturnMessage = ex.Message };
    }
}

[HttpPost]
[Route("api/GroupDocsApi/CreateEmptyExcelFile")]
public async Task<SPResponse> CreateEmptyExcelFile(DocPro.DMS.BusinessEntities.Request.GroupDocs.GetDocumentInfoRequest request)
{
    try
    {
        Workbook workbook = new Workbook();
        await Task.Run(() => workbook.Save(request.FileUploadPath));
        return new SPResponse() { ReturnStatus = "0" };
    }
    catch (Exception ex)
    {
        return new SPResponse() { ReturnStatus = "-1", ReturnMessage = ex.Message };
    }
}

[HttpPost]
[Route("api/GroupDocsApi/CreateEmptyPPTFile")]
public async Task<SPResponse> CreateEmptyPPTFile(DocPro.DMS.BusinessEntities.Request.GroupDocs.GetDocumentInfoRequest request)
{
    try
    {
        Presentation presentation = new Presentation();
        await Task.Run(() => presentation.Save(request.FileUploadPath, Aspose.Slides.Export.SaveFormat.Pptx));
        return new SPResponse() { ReturnStatus = "0" };
    }
    catch (Exception ex)
    {
        return new SPResponse() { ReturnStatus = "-1", ReturnMessage = ex.Message };
    }
}

after this my new API is getting executed LoadWordFile in that API I’m loading the document, below is the code →

[HttpPost]
[Route("api/GroupDocsApi/LoadWordFile")]
public async Task<SPResponse> LoadWordFile(DocPro.DMS.BusinessEntities.Request.GroupDocs.GetDocumentInfoRequest request)
{
    try
    {
        SPResponse sp = new SPResponse() { ReturnStatus = "-1" };
        await Task.Run(() =>
        {
            using (FileStream fs = new FileStream(request.FileUploadPath, FileMode.Open, FileAccess.Read))
            {
                Editor editor = new Editor(() => fs);
                WordProcessingEditOptions editOptions = new WordProcessingEditOptions();
                EditableDocument document = editor.Edit(editOptions);
                sp.Ref1 = document.GetContent();
                sp.ReturnStatus = "0";
            }
        });
        return sp;
    }
    catch (Exception ex)
    {
        return new SPResponse() { ReturnStatus = "-1", ReturnMessage = ex.Message };
    }
}

but this is how the editor is showing the data →

Editor (54.4 KB)

I want to view this as it is working in online example but I am not able to find any example for that.

I had tried only docx file but I want to do this for ppt as well as for excel files too.

thank you in advance

@Niteen_Jadhav

From your code it looks like you are using Aspose.Words, Aspose.Cells and Aspose.Slides APIs. Where did you use GroupDocs.Merger? Could you please share complete application?

This is my complete code I am not using merger here.

can you please provide a code that will help to understand how to use this properly

Created a sample project for your reference.

Drive Link

@Niteen_Jadhav

We already have document editor UI projects developed using GroupDocs.Merger for .NET. Take a look at the video demo.

GroupDocs.Editor for .NET also supports these document families.
We’d recommend you to explore the UI project shared above and let us know if you have any further queries.

The UI Demo is using Angular and we are developing using jQuery

Can you please share a UI Project that uses jQuery

@Niteen_Jadhav

We have created a request for a jQuery UI application here on GitHub. However, we cannot share any ETA of the delivery. You’ll be notified in case of any update.

Thanks a lot @atir.tahir,

This is just a Trial license and it will get expires in this month, and we also have a demo with a client coming Friday in that demo the client needs to see the functionality of Groupdocs Editor (Word/Excel/PPT). it will be a great help for us if we could get the solution before coming Friday as we are planning to upgrade the license to the latest version based on the Demo.

@Niteen_Jadhav

We’ll try to share a sample application with you.

@Niteen_Jadhav

We have prepared a sample for you. Please take a look here at GitHub.

Hello @atir.tahir,

Thank you for your prompt response, but the project you have shared is developed in .net 6 and we have .net 4.7 in our development environment and hence we are unable to run and test the application.

and also,

  1. It seems like the team who developed the application (thanks for the team to develop this very quickly) used textarea for the editor.

  2. The team used “tinymce” in the project. (can we develop editor without using tinymce)?

  3. The jQuery structure looks very different in the current project.

Viewer Example with version 20.8:

$('#element').viewer({
    applicationPath: '@Model.Server.HostAddress',
    defaultDocument: '@Model.Annotation.GetDefaultDocument()',
    preloadPageCount: @Model.Annotation.GetPreloadPageCount(),
    pageSelector: @Model.Common.pageSelector.ToString().ToLowerInvariant(),
    download: @Model.Common.download.ToString().ToLowerInvariant(),
    upload: @Model.Common.upload.ToString().ToLowerInvariant(),
    print: @Model.Common.print.ToString().ToLowerInvariant(),
    browse: @Model.Common.browse.ToString().ToLowerInvariant(),
    rewrite: @Model.Common.rewrite.ToString().ToLowerInvariant(),
    enableRightClick: @Model.Common.enableRightClick.ToString().ToLowerInvariant(),
});

it will be helpful for us if you provide the sample project using the above details.

@Niteen_Jadhav

Thank you for your feedback on the application.

The GroupDocs.Editor for .NET is a UI-agnostic API, which means we had the flexibility to choose the UI framework and editor we wanted to use for the application.

While we used TinyMCE in this particular implementation, the API itself does not require the use of any specific front-end WYSIWYG HTML editor. Developers have the freedom to integrate the API with the editor of their choice, be it TinyMCE, CKEditor, or any other suitable option.

Regarding the jQuery structure used in the application, we have provided a dedicated wiki page that demonstrates how the GroupDocs.Editor RESTful API for .NET can be accessed using jQuery. This example code is intended to help you understand how the API can be integrated with the front-end, and you are free to adapt it to your own requirements and preferred coding styles.

Thank you @atir.tahir, what can we do with the dot net version?

@Niteen_Jadhav

That is why we prepared this Wiki for you so that you can develop the application from scratch in any .NET framework.

Hello,

Thanks a lot for your prompt response. I have created a project using the example provided by you.

I am facing few errors in this project and I’ll need your help to fix these issues.

I am getting the below error while calling "createNew" Api in my "GroupDocsController" controller

An error has occurred.
An error occurred when trying to create a controller of type ‘GroupDocsController’. Make sure that the controller has a parameterless public constructor.
System.InvalidOperationException
at System.Web.Http.Dispatcher.DefaultHttpControllerActivator.Create(HttpRequestMessage request, HttpControllerDescriptor controllerDescriptor, Type controllerType) at System.Web.Http.Dispatcher.HttpControllerDispatcher.d__15.MoveNext()

An error has occurred.
Type ‘GroupDocs_Editor.Controllers.GroupDocsController’ does not have a default constructor
System.ArgumentException
at System.Linq.Expressions.Expression.New(Type type) at System.Web.Http.Internal.TypeActivator.Create[TBase](Type instanceType) at System.Web.Http.Dispatcher.DefaultHttpControllerActivator.GetInstanceOrActivator(HttpRequestMessage request, Type controllerType, Func`1& activator) at System.Web.Http.Dispatcher.DefaultHttpControllerActivator.Create(HttpRequestMessage request, HttpControllerDescriptor controllerDescriptor, Type controllerType)

I am sharing the sample project created by me.

and it’ll be a great help if you add the code to view word/excel/ppt document in the editor in my current solution.

Update: please find the link for the same → GroupDocs Editor.zip - Google Drive

@Niteen_Jadhav

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): EDITORNET-2822

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

@Niteen_Jadhav

We updated existing GitHub sample project. This application uses official supported .NET 4.6.2 framework, see more.

Moreover, this MVC application is similar to the Viewer sample, as you asked.

Again the front end is developed in Angular and not in jQuery

@Niteen_Jadhav

Please note that all free support tickets/issues are assisted on first come first served basis. At the moment we have these demo projects (and the documentation) that we already shared with you. Let us further explain how API could be utilized in the UI application.

Take a look at this documentation article - get html markup in different forms.

public IActionResult Index()
{
    License lic = new License();
    lic.SetLicense(@"license file path");
    string inputFilePath = @"D:\\document.pdf"; //path to some document
    Editor editor = new Editor(inputFilePath);

    PdfEditOptions editOptions = new PdfEditOptions();

    EditableDocument readyToEdit = editor.Edit(editOptions);
    string htmlContent = readyToEdit.GetContent();

    ViewBag.HtmlContent = htmlContent;

    TempData["InputFilePath"] = inputFilePath;

    return View();
}

Below is the basic code for the View:

<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

@using (Html.BeginForm("SaveEditedDocument", "Home", FormMethod.Post))
{
    <textarea name="editor1" id="editor1">
        @Html.Raw(ViewBag.HtmlContent)
        </textarea>
    <script>
        CKEDITOR.replace('editor1');
    </script>
    <input type="submit" value="Save Changes" />
    @Html.Hidden("inputFilePath", TempData["InputFilePath"].ToString())
}

And following code to save the updated (content updated using CKEDITOR) document:

public ActionResult SaveEditedDocument(string editor1, string inputFilePath)
{
    string editedHtmlContent = editor1;

    // Create an EditableDocument from the edited HTML content
    EditableDocument afterEdit = EditableDocument.FromMarkup($"<body>{editedHtmlContent}</body>", null);

    // Define the output file path and save options
    string outputFilePath = @"D:\\output.pdf";
    PdfSaveOptions saveOptions = new PdfSaveOptions();

    // Use the input file path to create a new Editor instance and save the document
    using (Editor editor = new Editor(inputFilePath))
    {
        editor.Save(afterEdit, outputFilePath, saveOptions);
    }

    return RedirectToAction("Index");
}

Edit and save options could be changed as per the source file/format (e.g. PdfEditOptions, WordProcessingEditOptions, PdfSaveOptions or WordProcessingSaveOptions).