Inline Editor Toolbar fixed to top

[Lee]

I added a Kendo UI JQuery Editor to my page. It looks as expected when it is generated from a textarea but when it is generated from a div the toolbar pops up and floats around. I want it always visible AND fixed to the top of the editor just like on this page or on the classic editor. I found one article about it but that article didn't seem to work. My editor also needs to be resizable with an initial height of 75px. Resizing currently doesn't go any smaller than 100px. See this Dojo for the resizing problem: https://dojo.telerik.com/EXiSugUg. I have multiple editors on the page in a modal. I am generating them in a loop like so: 

// html <div id="editor1"></div><div id="editor2"></div>...
let id = "editor1";
let editors = {};
editors[id] = $(`#${id}`).kendoEditor({
        pasteCleanup: {
            keepNewLines: true
        },
        resizable: {
            content: true,
            toolbar: true
        },
        tools: [
            "bold", "italic", "underline", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "justifyLeft", "justifyCenter", "justifyRight"
        ]
    }).data("kendoEditor");

[Martin]

Hello, Lee,

You can hide the drag handle which will prevent the Window containing the Toolbar from being dragged. Combined with the article you mentioned, you will have the div-initialized Editor always at the top. Here is a small example for reference.

Regarding the resizing question, if you initially set the height of the textarea to 75, your resizable.min option will work as expected. Here is the modified version of your example. 

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

[Lee]

This worked in version 2022. Is there a 2024 update? It seems like the example here is putting a gap between the editor and the input area.

Update: this is the change I made to fix it: 

    if (!classicMode) {
        editor.toolbar.show();
        $(editor.body).addClass("k-state-active").off("focusout.kendoEditor");
        if (editor.toolbar) {
            let toolbar = $(editor.toolbar.wrapper);
            let toolbarWindow = $(toolbar).closest(".k-window");
            $(`#${id}`).wrapAll('<div class="kendo-text-editor-wrapper"></div>');
            let wrapper = $(`#${id}`).closest(".kendo-text-editor-wrapper");
            wrapper.prepend(toolbar);
            toolbarWindow.detach();
        }
    }

[Martin]

Hello, Lee,

I am not sure what is the difference in the two versions you mentioned. But from what I understand, you managed to resolve the issue, so thank you for sharing your code in the thread.