ImageBrowser Screws Up Page Layout

[Raymond]

I am using the Kendo Editor in an MVC/AngularJS application and there is a problem when I configure the imageBrowser for the editor.  

When the editor is first displayed it is set to "read-only" until the user selects the "Edit" option as shown in the attached image "EditorReadOnly".  
Once the user selects "Edit" the editor is set to "read-write" as shown in the attachment "EditorReadWrite".  This has been working correctly for a while now.

I then decided to implement the "imageBrowser" options to allow the user to insert an image in the editor (see this thread for a background).  When I included the configuration options to allow the user to browse for the images to be inserted my page layout gets screwed up as shown in the attachment "EditorImageBrowser".

The HTML for the template is;

<div class="form-group" show-errors>
    <div class="col-md-10 col-sm-8">
        <div class="row">
            <label id="sectionText" for="txtNarrative" class="col-xs-12 control-label" style="text-align: left;">{{formData.sectionTitle}}</label>

            <div class="col-sm-12">
                <div ng-class="{'has-error' : frmSection.txtNarrative.$invalid && frmSection.txtNarrative.$dirty}">
                    <textarea kendo-editor="txtNarrative"
                              ng-model="rptSectionText.narrative"
                              id="txtNarrative"
                              name="txtNarrative"
                              class="form-control"
                              ng-required="true"
                              k-encoded="false"
                              k-tools="editorTools"
                              style="height: 400px;"
                              stylesheets="['/Content/KendoEditor.css']"></textarea>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 10px;">
            <div class="col-sm-6">
                <input type="radio" name="status" value=0 ng-disabled="!formData.editing" ng-model="rptSectionText.status" /> Draft
                <input type="radio" name="status" value=1 ng-disabled="!formData.editing" ng-model="rptSectionText.status" /> Submitted
                <input type="radio" name="status" value=2 ng-disabled="!formData.editing" ng-model="rptSectionText.status" /> Approved
            </div>

            <div class="col-sm-6">
                <div class="pull-right">
                    <input type="button" class="btn btn-default" ng-show="!formData.editing && formData.editable" value="Edit" ng-click="toggleEdit()" title="Edit the selected section text" />
                    <input type="button" class="btn btn-danger" ng-show="!formData.editable && rptSectionText.id" value="Revise" ng-click="toggleReview()" title="Remove the Approved status to allow editing" />
                    <input type="button" class="btn btn-danger" ng-show="formData.editing" value="Undo" ng-click="undoChanges()" title="Undo any changes made to the section text since it was loaded or last saved" />
                    <input type="submit" class="btn btn-success" ng-show="formData.editing" ng-disabled="frmSection.$invalid" value="Save" ng-click="submitForm()" title="Save any changes made to the section text (document remains checked out)" />
                    <input type="button" class="btn btn-default" ng-show="formData.editing" value="Close" ng-click="closeEditor()" title="Check-in the document once all changes have been saved" />
                </div>
            </div>
        </div>
</div>

The code in the controller to set the editor read-only is;

// Set the editor to read-only until the user selects "Edit"...
$scope.$on("kendoWidgetCreated", function (event, widget) {
    // The following code which is the recommended way to modify the editor didn't work because the "if (widget === $scope.txtNarrative)" statement never returned true?
    //if (widget === $scope.txtNarrative) {
    //  console.log("Found narrative widget...");
    //  $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
    //}

    var editor = $('#txtNarrative').data('kendoEditor');

    if (editor !== undefined) {
       editor.body.contentEditable = false;
        $('.k-editor-toolbar').hide();
    }
});

And the code to configure the imageBrowser is;

// Set the editor to read-only until the user selects "Edit"...
$scope.$on("kendoWidgetCreated", function (event, widget) {
    // The following code which is the recommended way to modify the editor didn't work because the "if (widget === $scope.txtNarrative)" statement never returned true?
    //if (widget === $scope.txtNarrative) {
    //  console.log("Found narrative widget...");
    //  $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
    //}

    var editor = $('#txtNarrative').data('kendoEditor');

    if (editor !== undefined) {
        $('#txtNarrative').kendoEditor({
            imageBrowser: {
                transport: {
                    read: "imagebrowser/read",
                    destroy: "imagebrowser/destroy",
                    create: "imagebrowser/createDirectory",
                    uploadUrl: "imagebrowser/upload",
                    thumbnailUrl: "imagebrowser/thumbnail",
                    imageUrl: "/content/images/{0}"
                }
            }
        });

        editor.body.contentEditable = false;
        $('.k-editor-toolbar').hide();
    }
});

Even though the page layout is screwed when I click the "Insert Image" toolbar button the image browser is displayed correctly and the selected image is placed in the editor.

Any suggestions on how to fix this would be greatly appreciated.

[Dimo]

Hi Raymond,

The problem is likely to be caused by conflicting CSS styles, but the provided information is not sufficient for me to pinpoint the exact cause. Can you check the page layout with the browser's DOM inspector to see if anything pops up? In case you need further assistance, please provide an isolated runnable example, so that I can reproduce the issue and see what causes it.

Regards,
Dimo
Telerik

 

 

[Raymond]

Hi Dimo,

Sorry I didn't get back to you earlier - I was working on another issue.

When I used the development tools to inspect the page it shows there are two body elements; see the attached files.

[Dimo]

Hello Raymond,

The two <body> elements may end up on the page if you initialize the Editor twice. For example, you initialize the Editor via script in the kendoWidgetCreated event, and later on, the widget is initialized again because of its Angular attributes. Please rework the code, so that this does not happen.

Regards,
Dimo
Telerik

[Raymond]

Hi Dimo,

You were correct; my editor was configure as;

<textarea kendo-editor="txtNarrative"
    ng-model="rptSectionText.narrative"
    id="txtNarrative"
    name="txtNarrative"
    class="form-control"
    ng-required="true"
    k-encoded="false"
    k-tools="editorTools"
    style="height: 400px;"
    stylesheets="['/Content/KendoEditor.css']">
</textarea>

 and the code to set the imageBrowser options was;

$('#txtNarrative').kendoEditor({
    imageBrowser: {
        transport: {
            read: "imagebrowser/read",
            destroy: "imagebrowser/destroy",
            create: "imagebrowser/createDirectory",
            uploadUrl: "imagebrowser/upload",
            thumbnailUrl: "imagebrowser/thumbnail",
            imageUrl: "/content/images/{0}"
        }
    }
});

Once I changed this to;

<textarea kendo-editor="txtNarrative"
    ng-model="rptSectionText.narrative"
    id="txtNarrative"
    name="txtNarrative"
    class="form-control"
    ng-required="true"
    k-encoded="false"
    k-tools="editorTools"
    k-image-browser="imageBrowser"
    style="height: 400px;"
    stylesheets="['/Content/KendoEditor.css']">
</textarea>

and;

$scope.imageBrowser = {
    transport: {
        read: "imagebrowser/read",
        destroy: "imagebrowser/destroy",
        create: "imagebrowser/createDirectory",
        uploadUrl: "imagebrowser/upload",
        thumbnailUrl: "imagebrowser/thumbnail",
        imageUrl: "/content/images/{0}"
    }
};

the page displayed correctly.

[Raymond]

Hi Dimo,

Now the display is OK but whenever I click on the "Insert Image" option I get the error "JavaScript runtime error: 'uid' is undefined" in kendo.all.min.js.

The call stack shows; "refresh [kendo.all.min.js] Line 31" and the code highlighted is "h+=l%2?f(u[l]):p(u[l])".  The Kendo version is 2014.3.1316.

Curiously the code was working previously when I first reported the problem with the page layout as noted above?

[Dimo]

Hello Raymond,

This error usually indicates incorrect ImageBrowser configuration or incorrect server response. Please double-check, compare your implementation with our demos, and send a runnable example or a live URL if you need further assistance.

Regards,
Dimo
Telerik