GroupDocs Editor Not Working with Kendo

GroupDocs.Editor Product Family
, ,
39

I changed my code a little because I was unable to save docx files due to the below code

let SaveDetails = {
    FileId: $('#FileId').val(),
    GUID: $('#FileServerId').val(),
    EditorData: $('#editor').text(),
}

so, I did something like below

var editorContent = $("#editor").data("kendoEditor").value();
e.preventDefault();
let SaveDetails = {
    FileId: $('#FileId').val(),
    GUID: $('#FileServerId').val(),
    EditorData: editorContent,
}

now almost all the files are getting save properly but one of the file
Automation - Termsheet (Docpro) Template.zip (2.8 MB)
is not getting saved

I am getting the following error

System.NotImplementedException: ‘How to process DelimToken with ‘&’ delim char?’

on EditableDocument afterEdit = EditableDocument.FromMarkup($"<body>{editedHtmlContent}</body>", new List<IHtmlResource>());

what can I do to fix this?

40

Thank you for sharing the details of the issue and your code adjustments. Based on the information you provided, it seems that the error is related to the format of the HTML content being passed to EditableDocument.FromMarkup. Specifically, the value returned by $("#editor").data("kendoEditor").value() appears to be an escaped part of the string that GroupDocs.Editor cannot process properly.

While we are not directly familiar with the Kendo Editor, during our investigation, we used a workaround to address similar issues. The workaround involves retrieving the raw HTML content directly from the editor’s DOM, as shown in the following example:

var rawHtmlContent = editor.body.innerHTML; // Get the editor content

You can see the implementation of this approach in the following commit from our repository:
GroupDocs.Editor Fix Commit.

We recommend modifying your code to retrieve the raw HTML content instead of using the escaped string returned by $("#editor").data("kendoEditor").value(). This should allow GroupDocs.Editor to process the HTML properly.

Please let us know if this workaround resolves your issue, or if further assistance is required. We are happy to help.

41

no, the workaround did not work →

Aspose.Words.FileCorruptedException: ‘The document appears to be corrupted and cannot be loaded.’

I am getting the above error on editor.Save(afterEdit, outputFilePath, saveOptions); code.

my front-end

var editor = $("#editor").data("kendoEditor");
var editorContent = editor.body.innerHTML
e.preventDefault();
let SaveDetails = {
    FileId: $('#FileId').val(),
    GUID: $('#FileServerId').val(),
    EditorData: editorContent,
}

NOTE: this error is also coming on a specific file and working with simpler Docx file

42

Thank you for the update and additional details. Based on your explanation and the specific error you’re encountering, this appears to be a file-related issue rather than a general topic about “GroupDocs Editor Not Working with Kendo”.

We will create a bug report for this issue and investigate it further on our side. In the meantime, could you please confirm if the issue is reproducible with other documents? Testing with different files will help us determine whether the problem is specific to the document in question or if it applies more broadly.

Additionally, we recommend creating a new topic specifically for this file-related problem. This will help us keep the discussions organized and ensure a clear resolution path.

Please let us know once the new topic is created, and we’ll prioritize our investigation to provide a detailed update as soon as possible.
Thank you for your cooperation.

43

I’ll check with different types of files.

I think the issue is coming because the document contains comments and some formulas.

I’ll check this in the morning IST and will update you accordingly

44

Hello team, I tested editor completely and found some issues with the editor functionality.

  1. The document is not properly visible in the editor and there are alignment issues with the file on editor page Original File, editor view,
    Front-end code

  2. some of the document is giving error while saving, but some of are getting saved. This file is getting saved, This file not getting saved. Error: The document appears to be corrupted and cannot be loaded.

  3. The Document which are saving have issue with the alignment and the content are getting shifted to right side.
    Before Editing, After Editing

45

Hello Team,

Do we have any inputs on the above mentioned points?

46

Hi @Niteen_Jadhav

Sorry for the delay, it took some time to investigate all files and scenarious. Here are the results:

1. From the provided screenshot “editor view.PNG” I guess (but I may be wrong - if yes, please correct me) that you’re concerned about alignment of the first text block, right above the table, because it is stretched to the right side compared to the table below it. This is because you’ve converted DOCX document to the HTML in a float mode, where there are no strict page limits and boundaries. Like in pure HTML, content is adaptive and it fits into the viewport of any size. I’ve converted your “CMES KA GCOA Termsheet DocPro template.docx” file to the HTML float mode using GroupDocs.Editor and opened it in the browser in two instances: 1st one (attached file “Broad.png”) when my browser window is stretched among all display, and 2nd (attached file “Narrow.png”) when I manually narrowed windth of my browser window. As you can see, text content fits the viewport.

Broad.png (40.0 KB)
Narrow.png (47.5 KB)

If you want to achieve the same result as when you open the document in MS Word, please try to enable the pagination mode using the WordProcessingEditOptions class and its EnablePagination property set to true or simply new WordProcessingEditOptions(true). More on that here.

2. I confirm that for the file “Automation-Termsheet-Docpro.docx” the “The document appears to be corrupted and cannot be loaded” exception is thrown during its backward conversion from the HTML to the DOCX format and this is a bug. We already started to work on it and will notify you when it will be fixed.

3. Unfortunately I cannot reproduce it. I’ve took the document “CMES KA GCOA Termsheet DocPro template.docx” and made its roundtrip - converted it to HTML (editing) and then reconverted it back to the DOCX (saving) using the next code:

string filename = "CMES KA GCOA Termsheet DocPro template.docx";
bool isPaged = true;

string inputPath = Path.Combine("some input folder", filename);
FileAssert.Exists(inputPath);

string outputPath = Path.Combine("some output folder", string.Format("{0}-{1}.docx", Path.GetFileNameWithoutExtension(filename), isPaged ? "paged" : "float"));


WordProcessingEditOptions editOpt = new WordProcessingEditOptions(isPaged);
WordProcessingSaveOptions saveOpt = new WordProcessingSaveOptions(WordProcessingFormats.Docx);
saveOpt.EnablePagination = isPaged;

using (Editor editor = new Editor(inputPath, new WordProcessingLoadOptions()))
{
    using (EditableDocument edited = editor.Edit(editOpt))
    {
        string allEmbedded = edited.GetEmbeddedHtml();
        using (EditableDocument saved = EditableDocument.FromMarkup(allEmbedded, null))
        {
            editor.Save(saved, outputPath, saveOpt);
        }
    }
}

The resultant file “CMES KA GCOA Termsheet DocPro template-paged.docx” I’m attaching to this post, you can see that there are no issues as you described. Maybe you’ve used some other editong and/or saving options for doing that?

CMES KA GCOA Termsheet DocPro template-paged.docx (2.8 MB)

Thanks and waiting for your reply.

With best regards,
Denis Gvardionov

47

Below is my API to save the file

[HttpPost]
[Route("api/GroupDocsApi/SaveWordFile")]
public SPResponse SaveWordFile(DocPro.DMS.BusinessEntities.Request.GroupDocs.GetDocumentInfoRequest request)
{
    SPResponse sp = new SPResponse() { ReturnStatus = "-1" };
    string editedHtmlContent = request.EditorData;

    string inputFilePath = Path.Combine(request.StoragePath, request.GUID);
    string guid = Guid.NewGuid().ToString();
    string extension = Path.GetExtension(request.GUID);
    string outputFilePath = Path.Combine(request.StoragePath, guid + "." + extension);

    EditableDocument afterEdit = EditableDocument.FromMarkup($"<body>{editedHtmlContent}</body>", new List<IHtmlResource>());
    GroupDocs.Editor.Options.WordProcessingSaveOptions saveOptions = new GroupDocs.Editor.Options.WordProcessingSaveOptions();

    using (Editor editor = new Editor(inputFilePath))
    {
        editor.Save(afterEdit, outputFilePath, saveOptions);
    }
    sp.ReturnStatus = "0";
    sp.Ref1 = guid;
    return sp;
}

here, my HTML content is stored in editedHtmlContent but the solution provided by you does not have this or any other HTML content which will be saved

EDIT: after adding WordProcessingEditOptions options = new WordProcessingEditOptions(true);

the table inside the document seems to aligned to the right, sharing the Screenshot for your reference.

48

@Niteen_Jadhav

Please debug your source code sample, store the textual value of the editedHtmlContent variable, which you obtain from the client-side (request.EditorData) and then pass to the EditableDocument.FromMarkup method, save it to the text file and attach this file here. I’ll check your HTML markup on my side.

With best regards,
Denis Gvardionov

49

Please explain this.

50

@Niteen_Jadhav

I want to check the backward conversion (from edited HTML to resultant DOCX) on my side in order to reproduce your issue. So I need a value of the editedHtmlContent variable. The easiest way of doing that for you is to debug your code, put a breakpoint on the EditableDocument afterEdit = EditableDocument.FromMarkup line of code, copy the value of the editedHtmlContent variable, paste it into some new *.txt document and then send this document to me through attachment in this forum topic.

With best regards,
Denis

51

shared both the files with you please check and update me.

corrupted file.zip (3.0 MB)

Working File.zip (3.0 MB)

also, what is the update on the alignment issue which I raised today?

we are still stuck on the editor issue since December

52

Hello Team,

Do we have any updates on these issues?

53

Hello team,

Any updates?

54

Hi @Niteen_Jadhav

Sorry for the long delay, it took some time to investigate all of these and prepare answer.

  1. Regarding the attached corrupted file.zip (3.0 MB) - I’ve checked this and confirm an exception, it was already reported by you some time ago, I confirmed that, it is logged as EDITORNET-2879 in our tracking system and we plan to fix it in the next release.

  2. Regarding the attached “Editor table.PNG” screenshot and the truncation and alignment issue. I believe this is because a width of your viewport is too small for this specific document. The table, which seems to be truncated from the right side in your web-app and which you’ve demonstrated on the screenshot, has a fixed width of 18.44 centimeters - I’ve checked this in MS Word table settings in the “CMES KA GCOA Termsheet DocPro template.docx” file. And it seems that the width of the viewport on your web-page is too small for this size. Table columns also cannot be narrowed, because they also have the fixed width: 1st one is 3.24cm, 2nd - 15.2cm. MS Word program and Office Open XML format allows to create tables with automatic sizes, which can fit into the page, but in this case the table is fixed.

  3. Regarding the response time. This is a free forum and we follow the free support policies. We cannot process your requests on real-time basics. If you need the more priority support, there is a Paid support with a dedicated team, which handles your requests. Also we provide the Paid Consulting, when our dedicated developer works with you and helps to integrate the GroupDocs products into your application.

Once more, sorry for the delay, and have a good day.

With best regards,
Denis Gvardionov

55

What can be done to fix this

56

@Niteen_Jadhav

In general, if your web app is designed to process different WordProcessing documents, created by different users, and you do not control how these documents are created, edited and formatted, you cannot predict the correct viewport width. Even in a single DOCX document may be different sections, where 1st one, for example, is standard portrait A4, 2nd is landscape A3, and 3rd is a some custom gigantic page with no borders. So the best way from my point of view is to make a horizontal scroll bar in your viewport. Or make the resizable width of the viewport. Or, maybe, auto-fittable width, but this will be more complex, I guess.

With best regards,
Denis

57

Can you please help me with some working example?

59

Hi @Niteen_Jadhav

I’m afraid I cannot help you with working example, because this requires studying and investigating Kendo editor, integrating in your project and pipeline, what is out of my competence. But as I said before, the GroupDocs offers a Paid Consulting, which was created especially for such cases - our dedicated developer joins your team and integrates the GroupDocs.Editor into your application.

I can here only suggest you an approach how to solve the issue and here is my advice:

  1. As I said before, a single WordProcessing document may have multiple sections, and every section may have its own page size (including page width) and orientation. From my point of view, if you want to get rid of content truncating and horizontal scroll bar in the viewport, you should fit your viewport width to the largest possible page width in the given WordProcessing document.
  2. I suggest you to convert the document to the HTML and vice versa in the paginal mode, as I has demonstrated above.
  3. When the document is converted to HTML format in paginal mode, its HTML markup has a central MAIN element, and there are a distinct SECTION element per each section of the document as a child of MAIN element. For example, a document with 3 sections will be converted to the HTML, where one MAIN element will have 3 child SECTION elements.
  4. Each SECTION element has an appropriate CSS ruleset, where its actual width is stored. For example, a SECTION element looks like <section class="section" data-page-type="A4_Portrait" style="background-color: transparent;"> and it is connected with the CSS ruleset section[data-page-type="A4_Portrait"] { width: 595pt; min-height: 842pt; }.
  5. What you actually need is to get all SECTION elements within output HTML document, get all their “width” CSS properties, and featch the biggest one.
  6. So the final approach looks like the next. You convert the input WordProcessing document to the HTML document using GroupDocs.Editor in paginal format; send this HTML document to the client-side; there parse HTML document with JavaScript, find the root MAIN element, iterates over all its child SECTION elements, and for each you grab the value of the “width” CSS property; then you select the largest “width” value and use it as a final width of your viewport.

Hope this helps.

With best regards,
Denis Gvardionov