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!