GroupDocs Editor Not Working with Kendo

GroupDocs.Total Product Family
, ,
1

Hello,

I am working with GroupDocs Editor, previously we were using TinyMCE and now going ahead with Kendo as we are already using Kendo Editor in some of our functionalities.

There were few errors in TinyMCE as well like it not loading all pages of the document and the style is not as expected.

so, here is my code for TinyMCE.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Editor</title>
    @Html.HiddenFor(m => m.FileId)
    @Html.HiddenFor(m => m.FileServerId)
</head>
<body>
    <div>
        <textarea id="documentContent">@Html.Raw(Model.HtmlContent)</textarea>
        <button id="btnSave" class="btn btn-primary">Save</button>
    </div>
    <link type="text/css" rel="stylesheet" href="~/resources/common/css/all.min.css">
    <link type="text/css" rel="stylesheet" href="~/resources/common/css/v4-shims.min.css">
    <link type="text/css" rel="stylesheet" href="~/resources/common/css/swiper.min.css">
    <link type="text/css" rel="stylesheet" href="~/resources/common/css/circle-progress.css" />
    <link type="text/css" rel="stylesheet" href="~/resources/DocViewer/css/viewer.css" />
    <link type="text/css" rel="stylesheet" href="~/resources/DocViewer/css/viewer.mobile.css" />
    <link type="text/css" rel="stylesheet" href="~/resources/DocViewer/css/viewer-dark.css" />
    <script type="text/javascript" src="~/resources/common/js/jquery.min.js"></script>

    <link href="@Url.Content("~/Content/kendo/2019.2.514/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2019.2.514/kendo.rtl.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2019.2.514/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2019.2.514/kendo.default.min.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/kendo/2019.2.514/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2019.2.514/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2019.2.514/kendo.all.min.js")"></script>
    <script type="text/javascript" src="~/resources/common/js/swiper.min.js"></script>
    <script type="text/javascript" src="~/resources/common/js/es6-promise.auto.js"></script>
    <script src="@Url.Content("~/Content/bootstrap/js/bootstrap.min.js")"></script>
    <script src="@Url.Content("~/Scripts/utils.js?t=" + File.GetLastWriteTime(Server.MapPath(Url.Content("~/Scripts/utils.js")).ToString()))"></script>
    <script src="@Url.Content("~/config.js?t=" + File.GetLastWriteTime(Server.MapPath(Url.Content("~/config.js")).ToString()))"></script>
    <script src="@Url.Content("~/Scripts/DynamicEntryControl.js")"></script>
    <script src="@Url.Content("~/Scripts/common.js?t=" + File.GetLastWriteTime(Server.MapPath(Url.Content("~/Scripts/common.js")).ToString()))"></script>
    <script src="@Url.Content("https://cdn.tiny.cloud/1/ecoy6vkhzfp9gkb10t6bcd812tyybn8jisxv989irr444qcd/tinymce/7/tinymce.min.js")"></script>
    <script>
        tinymce.init({
            selector: '#documentContent',
            height: 500,
            plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            toolbar_mode: 'floating',
            toolbar: 'undo redo | formatselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
            content_style: `@Html.Raw(Model.CssContent)`
        });
        $('#btnSave').click(function () {
            let SaveDetails = {
                FileId: $('#FileId').val(),
                GUID: $('#FileServerId').val(),
                EditorData: $('#documentContent').text(),
            }
            ajaxCallFunction("POST", "/api/Document/Document/SaveWordFile", JSON.stringify(SaveDetails), function (response) {

            });
        });
    </script>

</body>
</html>

and the output is like THIS

my code for Kendo Editor

@model DocPro.DMS.BusinessEntities.Request.GroupDocs.GetDocumentInfoRequest
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.HiddenFor(m => m.FileId)
@Html.HiddenFor(m => m.FileServerId)
<style type="text/css">
    html {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }

    body {
        font-family: "DejaVu Serif";
    }

    #editor {
        font-size: 12px;
    }

    .ChildTableRefFieldDiv .dc_Label {
        margin: 0px;
    }
</style>

<script src="~/Content/kendo/2019.2.514/fonts/fonts.js"></script>

<form id="WordCreatorForm">
    <div id="dv_storeHtml" style="display:none;"></div>
    <div id="dv_Editor">
        <textarea id="editor" rows="4" cols="32" style="width:100%;height:400px"></textarea><br />
        <a href="#" id="btnUpload" class="btn btn-primary">@Resources.Resource.Save</a>
    </div>
</form>

<script>
        function convertToHTML(convertedIntoHtml) {
            return convertedIntoHtml;
        }

        try {
            htmlContent = convertToHTML(@Html.Raw(Json.Encode(Model.HtmlContent)));
        }
        catch (e) {

        }

        $("#editor").kendoEditor({
            tools: [
                "bold",
                "italic",
                "underline",
                "strikethrough",
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull",
                "insertUnorderedList",
                "insertOrderedList",
                "indent",
                "outdent",
                "createLink",
                "unlink",
                "insertImage",
                "subscript",
                "superscript",
                "tableWizard",
                "createTable",
                "addRowAbove",
                "addRowBelow",
                "addColumnLeft",
                "addColumnRight",
                "deleteRow",
                "deleteColumn",
                "mergeCellsHorizontally",
                "mergeCellsVertically",
                "splitCellHorizontally",
                "splitCellVertically",
                "viewHtml",
                "formatting",
                "cleanFormatting",
                "copyFormat",
                "applyFormat",
                /*"fontName",*/
                "fontSize",
                "foreColor",
                "backColor",
                "pdf",
                {
                    name: "fontName",
                    items: [
                        { text: "Andale Mono", value: "Andale Mono" },
                        { text: "Arial", value: "Arial" },
                        { text: "Arial Black", value: "Arial Black" },
                        { text: "Book Antiqua", value: "Book Antiqua" },
                        { text: "Comic Sans MS", value: "Comic Sans MS" },
                        { text: "Courier New", value: "Courier New" },
                        { text: "Georgia", value: "Georgia" },
                        { text: "Helvetica", value: "Helvetica" },
                        { text: "Impact", value: "Impact" },
                        { text: "Symbol", value: "Symbol" },
                        { text: "Tahoma", value: "Tahoma" },
                        { text: "Terminal", value: "Terminal" },
                        { text: "Times New Roman", value: "Times New Roman" },
                        { text: "Trebuchet MS", value: "Trebuchet MS" },
                        { text: "Verdana", value: "Verdana" },
                        { text: "Webdings", value: "Webdings" },
                        { text: "Wingdings", value: "Wingdings" },
                        { text: "Calibri", value: "Calibri" },
                        { text: "Sai Indira(Tamil)", value: "TSCu_SaiIndira" },
                        { text: "Marutham(Tamil)", value: "Padasalai-TAU-Marutham" },
                        { text: "Tahoma", value: "Tahoma" },
                    ]
                },
                {
                    name: "custom",
                    tooltip: "Add page break",
                    exec: function (e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("inserthtml", { value: "<p STYLE='page-break-before: always'>Page break here!</p>" });
                    }
                }
            ],
            pdf: {
                fileName: "NewDocument",
                proxyURL: window.opener.Utils.getWebApiUrl() + "/FileBrowser/PDFhandler",
                paperSize: "a4",
                margin: {
                    bottom: 20,
                    left: 20,
                    right: 20,
                    top: 20
                },
                forceProxy: true,
                allPages: true,  // Ensures all content is exported
                avoidLinks: true, // Avoids issue with non-UTF-8 characters in URLs
            },
            imageBrowser: {
                messages: {
                    dropFilesHere: "Drop files here"
                },
                transport: {
                    read: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Read?user=" + window.opener.Utils.getUserId(),
                    destroy: {
                        url: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Destroy",
                        type: "POST"
                    },
                    create: {
                        url: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Create",
                        type: "POST"
                    },
                    uploadUrl: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Upload",
                    fileUrl: window.opener.Utils.getWebApiUrl() + "/FileBrowser/File?fileName={0}",
                    thumbnailUrl: window.opener.Utils.getWebApiUrl() + '/FileBrowser/Thumbnail',
                    imageUrl: window.opener.Utils.getWebApiUrl() + "/content/UserFiles/{0}",
                },
            }
        });

        kendo.pdf.defineFont({
            "TSCu_SaiIndira": "../../Content/kendo/2019.2.514/fonts/TSCu_SaiIndira.ttf",
            "Padasalai-TAU-Marutham": "../../Content/kendo/2019.2.514/fonts/Padasalai-TAU-Marutham.ttf",
        });

        $('.k-fontName').change(function (e) {
            $("#editor").css({ " font-family": e.currentTarget.value });
        });

        $("#templateTool").kendoDropDownList({
            change: function (e) {
                $("#editor").data("kendoEditor").body.style.backgroundColor = e.sender.value();
            }
        });

        var html = htmlContent;
        const editor = $('#editor').data("kendoEditor");
        $('#dv_storeHtml').html(html);
        editor.exec("inserthtml", { value: $('#dv_storeHtml').text() });
        $('#dv_storeHtml').empty();
</script>

and the output is like This
How can I work with GroupDocs Editor and Kendo?

2

@Niteen_Jadhav

Unfortunately, we haven’t tested GroupDocs.Editor with Kendo. Let us try reproducing this issue.

3

Ok thank you,

Awaiting for your reply.

4

@Niteen_Jadhav

For the further investigation I have created an issue in our internal bug-tracker. The issue ID is EDITORNET-2877.

5

When can I expect an update from your end?

6

@Niteen_Jadhav

Unfortunately, I can’t provide you the ETA. The issue was created and has to be planned for investigation.

7

Hello @Niteen_Jadhav,

Based on your provided information and screenshots, we think there are two potential workarounds for your issue when working with GroupDocs.Editor and integrating it with Kendo Editor.

1. Use Embedded HTML

GroupDocs.Editor allows you to get the HTML content with styles directly embedded. This eliminates the need for an external style.css file and avoids any issues related to loading styles (e.g., MIME type errors as seen in your screenshot).

Refer to the “Getting HTML markup in different forms” documentation to extract embedded HTML:
https://docs.groupdocs.com/editor/net/get-html-markup-in-different-forms/

Example:

using (Editor editor = new Editor("example.docx"))
{
    WordProcessingEditOptions options = new WordProcessingEditOptions();
    EditableDocument editableDocument = editor.Edit(options);

    // Get the HTML with embedded styles
    string htmlWithStyles = editableDocument.GetEmbeddedHtml();
}

You can then inject this HTML content directly into your Kendo Editor:

const editor = $("#editor").data("kendoEditor");
editor.value(htmlWithStyles);

2. Validate and Fix Missing style.css

It seems the style.css file is not being returned from the API (as per the 401 Unauthorized error in your console). This might be due to an incorrect API endpoint being called when fetching the file.

To debug:

  • Verify the API endpoint for style.css and ensure it points to the correct location where the file is hosted.
  • Use browser developer tools or tools like Postman to test the API response.
  • If the endpoint is incorrect, update it to reflect the actual path of the CSS file returned by GroupDocs.Editor.

If document has external resources (stylesheets, fonts, images), they are referenced via different HTML elements: stylesheets are specified through LINK elements, while images — through IMG. When using the GetContent() method, such external resources will be referenced by external links. For example:

<link href="stylesheet.css" rel="stylesheet"/>
<IMG src="image.png"/>

Documentation: Getting Whole HTML Content

Example:

string fullHtml = editableDocument.GetContent(); // Includes CSS within the <style> tag

You can directly use this fullHtml in your Kendo Editor:

const editor = $("#editor").data("kendoEditor");
editor.value(fullHtml);

We hope these solutions address your concerns. Let us know if you need further assistance!

8

I’ll try the above Code and update you once completed

9

Hello Team,

I tried this code but unfortunately it is still not working sharing the screenshot for your reference.

Sharing the complete code for your reference.

SPResponse sp = new SPResponse() { ReturnStatus = "-1" };

using (Editor editor = new Editor(request.FileUploadPath))
{
    WordProcessingEditOptions options = new WordProcessingEditOptions();
    EditableDocument editableDocument = editor.Edit(options);

    // Get the HTML with embedded styles
    string fullHtml = editableDocument.GetContent();
    sp.HtmlContent = fullHtml;
}

return sp;

<form id="WordCreatorForm">
    <div id="dv_storeHtml" style="display:none;"></div>
    <div id="dv_Editor">
        <textarea id="editor" rows="4" cols="32" style="width:100%;height:400px"></textarea><br />
    </div>
</form>

<script>
    function convertToHTML(convertedIntoHtml) {
        return convertedIntoHtml;
    }

    try {
        htmlContent = convertToHTML(@Html.Raw(Json.Encode(Model.HtmlContent)));
    }
    catch (e) {

    }

    $("#editor").kendoEditor({
        tools: [
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "justifyFull",
            "insertUnorderedList",
            "insertOrderedList",
            "indent",
            "outdent",
            "createLink",
            "unlink",
            "insertImage",
            "subscript",
            "superscript",
            "tableWizard",
            "createTable",
            "addRowAbove",
            "addRowBelow",
            "addColumnLeft",
            "addColumnRight",
            "deleteRow",
            "deleteColumn",
            "mergeCellsHorizontally",
            "mergeCellsVertically",
            "splitCellHorizontally",
            "splitCellVertically",
            "viewHtml",
            "formatting",
            "cleanFormatting",
            "copyFormat",
            "applyFormat",
            /*"fontName",*/
            "fontSize",
            "foreColor",
            "backColor",
            "pdf",
            {
                name: "fontName",
                items: [
                    { text: "Andale Mono", value: "Andale Mono" },
                    { text: "Arial", value: "Arial" },
                    { text: "Arial Black", value: "Arial Black" },
                    { text: "Book Antiqua", value: "Book Antiqua" },
                    { text: "Comic Sans MS", value: "Comic Sans MS" },
                    { text: "Courier New", value: "Courier New" },
                    { text: "Georgia", value: "Georgia" },
                    { text: "Helvetica", value: "Helvetica" },
                    { text: "Impact", value: "Impact" },
                    { text: "Symbol", value: "Symbol" },
                    { text: "Tahoma", value: "Tahoma" },
                    { text: "Terminal", value: "Terminal" },
                    { text: "Times New Roman", value: "Times New Roman" },
                    { text: "Trebuchet MS", value: "Trebuchet MS" },
                    { text: "Verdana", value: "Verdana" },
                    { text: "Webdings", value: "Webdings" },
                    { text: "Wingdings", value: "Wingdings" },
                    { text: "Calibri", value: "Calibri" },
                    { text: "Sai Indira(Tamil)", value: "TSCu_SaiIndira" },
                    { text: "Marutham(Tamil)", value: "Padasalai-TAU-Marutham" },
                    { text: "Tahoma", value: "Tahoma" },
                ]
            },
            {
                name: "custom",
                tooltip: "Add page break",
                exec: function (e) {
                    var editor = $(this).data("kendoEditor");
                    editor.exec("inserthtml", { value: "<p STYLE='page-break-before: always'>Page break here!</p>" });
                }
            }
        ],
        pdf: {
            fileName: "NewDocument",
            proxyURL: window.opener.Utils.getWebApiUrl() + "/FileBrowser/PDFhandler",
            paperSize: "a4",
            margin: {
                bottom: 20,
                left: 20,
                right: 20,
                top: 20
            },
            forceProxy: true,
            allPages: true,  // Ensures all content is exported
            avoidLinks: true, // Avoids issue with non-UTF-8 characters in URLs
        },
        imageBrowser: {
            messages: {
                dropFilesHere: "Drop files here"
            },
            transport: {
                read: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Read?user=" + window.opener.Utils.getUserId(),
                destroy: {
                    url: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Destroy",
                    type: "POST"
                },
                create: {
                    url: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Create",
                    type: "POST"
                },
                uploadUrl: window.opener.Utils.getWebApiUrl() + "/FileBrowser/Upload",
                fileUrl: window.opener.Utils.getWebApiUrl() + "/FileBrowser/File?fileName={0}",
                thumbnailUrl: window.opener.Utils.getWebApiUrl() + '/FileBrowser/Thumbnail',
                imageUrl: window.opener.Utils.getWebApiUrl() + "/content/UserFiles/{0}",
            },
        }
    });

    kendo.pdf.defineFont({
        "TSCu_SaiIndira": "../../Content/kendo/2019.2.514/fonts/TSCu_SaiIndira.ttf",
        "Padasalai-TAU-Marutham": "../../Content/kendo/2019.2.514/fonts/Padasalai-TAU-Marutham.ttf",
    });

    $('.k-fontName').change(function (e) {
        $("#editor").css({ " font-family": e.currentTarget.value });
    });

    $("#templateTool").kendoDropDownList({
        change: function (e) {
            $("#editor").data("kendoEditor").body.style.backgroundColor = e.sender.value();
        }
    });

    var html = htmlContent;
    const editor = $('#editor').data("kendoEditor");
    $('#dv_storeHtml').html(html);
    editor.exec("inserthtml", { value: $('#dv_storeHtml').text() });
    $('#dv_storeHtml').empty();
</script>

below is the Editor output and orignal document for your reference.

10

@Niteen_Jadhav

Thank you for sharing details. We’ll analyze this issue and update you.

11

Ok thank you for your timely response

12

@Niteen_Jadhav

Sure, you’re welcome!

13

@Niteen_Jadhav
Thank you for sharing the details and the code snippet regarding the issue. After analyzing the implementation and reviewing where the problem might arise, we propose a minor modification to improve the handling of HTML content extraction with embedded styles.

  1. Updated Code

In the current implementation, the EditableDocument.GetContent() method is being used to fetch the HTML content. However, to ensure styles are embedded within the generated HTML, the EditableDocument.GetEmbeddedHtml() method would be more appropriate.

using (Editor editor = new Editor(request.FileUploadPath))
{
    WordProcessingEditOptions options = new WordProcessingEditOptions();
    EditableDocument editableDocument = editor.Edit(options);

    // Get the HTML with embedded styles
    string htmlWithStyles = editableDocument.GetEmbeddedHtml();
    sp.HtmlContent = htmlWithStyles;
}

return sp;
  1. Kendo Editor Configuration:

  • Issues may arise from:

    • Incorrectly encoded or escaped HTML content.
    • Problems with @Html.Raw or Json.Encode if the HTML content includes unescaped special characters.

    Proposed Adjustment to the Code:

To ensure proper encoding of the HTML content being inserted into the Kendo Editor, it is recommended to directly use the htmlContent variable. However, if you choose to retain the intermediate step using #dv_storeHtml, make sure that the method $('#dv_storeHtml').text() properly encodes the text as HTML before passing it to the editor. This ensures that special characters and tags are correctly handled and displayed within the editor.

For a more streamlined approach, let try the following simplified version:

const editor = $('#editor').data("kendoEditor");
editor.exec("inserthtml", { value: htmlContent });

Let me know if you’d like to refine this further!

14

Hello,

The example shared by you still not working,

when I am using like → htmlContent = convertToHTML(@Model.HtmlContent);

I am getting the below error
Uncaught SyntaxError: Unexpected token ‘&’ (

when I am using like → htmlContent = convertToHTML('@Html.Raw(Model.HtmlContent)');

I am getting the below error
Uncaught SyntaxError: Invalid or unexpected token (at

and if I am using like → htmlContent = convertToHTML('@HttpUtility.JavaScriptStringEncode(Model.HtmlContent)');

I am getting the below error

http://localhost:32695//Document/Document/"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/net::ERR_BLOCKED_BY_CLIENT

how can I fix this, I am struggling on this despite your efforts to make it work.

please note: the word document contains many images and complex CSS.

15

@Niteen_Jadhav,
Was your case reproduced using the same document, or was it with a different one?

Our proposition is as follows:

  1. Backend Side:
    Use editableDocument.GetEmbeddedHtml() to fetch the styled HTML content.

    string htmlWithStyles = editableDocument.GetEmbeddedHtml();
sp.HtmlContent = htmlWithStyles;

The EditableDocument.GetEmbeddedHtml() method in GroupDocs.Editor for .NET returns the entire HTML content of a document, with all related resources (such as images, stylesheets, and fonts) embedded directly within the HTML as base64-encoded strings.

  1. Frontend Side (Kendo in CSHTML):
    Use the following code to insert the HTML content into the Kendo editor. Make sure to use @Html.Raw to avoid unnecessary HTML encoding of the content.

    <script>
    const htmlContent = '@Html.Raw(Model.HtmlContent)';
    // Insert the fetched HTML content into the editor
    editor.exec("inserthtml", { value: htmlContent });
</script>

Key Considerations:

  • Escaping Special Characters:
    Model.HtmlContent can includes special characters like quotes (" or '), ensure the content is sanitized to avoid breaking the JavaScript.

  • Security:
    the HTML content, sanitize it server-side to prevent XSS vulnerabilities.

Let us know if you need further assistance or adjustments!

16

My document
18cc8f2c-e5c5-4b5c-b06b-cbf60fe53445 (1).zip (2.7 MB)

my code → 

htmlContent = '@Html.Raw(Model.HtmlContent)';
var html = htmlContent;
const editor = $('#editor').data("kendoEditor");
$('#dv_storeHtml').html(html);
editor.exec("inserthtml", { value: $('#dv_storeHtml').text() });

Error.PNG (45.6 KB)

17

  1. Encoding and Escaping Issues:
    We encountered encoding and escaping issues when rendering a full HTML document returned by GroupDocs.Editor. While we are not fully familiar with Kendo.Editor, the following workaround resolved the issue for us:

    <form id="WordCreatorForm">
    <div id="dv_Editor">
        <textarea id="editor" rows="4" cols="32" style="width:100%;height:600px">
            @Html.Raw(Model.Content)
        </textarea><br />
    </div>
</form>
<script>
    $("#editor").kendoEditor({
        // Kendo.Editor configuration here
    });
</script>

    This approach ensures that the content is rendered correctly inside the Kendo Editor without issues related to escaping or special characters.

image.png (37.5 KB)

  1. Using $().document.ready and AJAX Call for File Stream:
    To handle file streams efficiently, we implemented an AJAX call to fetch the HTML content from the backend. Here’s the relevant backend and frontend code:

    Backend (HomeController):

    public IActionResult EditFile()
{
    WordProcessingEditorService service = new WordProcessingEditorService();
    return File(Encoding.UTF8.GetBytes(service.GetEmmbededContent()), "text/html", "content.html");
}

    Frontend (Index.cshtml):

    <script>
    $(document).ready(function () {
        const editor = $("#editor").kendoEditor().data("kendoEditor");
        
        // AJAX call to fetch the HTML content
        $.ajax({
            url: "/Home/EditFile", // Controller method URL
            method: "GET",
            success: function (response) {
                editor.exec("inserthtml", { value: response });
            },
            error: function () {
                console.error("Failed to load content.");
            }
        });
    });
</script>

  1. Reference Examples for Integration:
    For further guidance, you can refer to the following examples from GroupDocs.Editor that demonstrate integration with similar editors (TinyMCE) but can be adapted for Kendo.Editor:

    While these examples use TinyMCE, the methodology for reading and processing HTML content remains similar.

Let us know if further clarifications or refinements are needed!

18

In the example provided by you, I’m not able to see the images which is there in the original file probably because of the scroll position but I want to make sure if images are rendering correctly.

What about the rendering of pptx?

Will this approach work?

19

Hello Team, I tried your example but still facing the issue

my new code → 

<textarea id="editor" rows="4" cols="32" style="width:100%;height:600px">
    @Html.Raw(Model.Content)
</textarea><br />

error PNG

should I share my complete code?

20

it will be better if you can share me the example project