Inline Editor Toolbar fixed to top

1 Answer 27 Views
Editor
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 20 May 2022, 10:40 PM | edited on 20 May 2022, 10:53 PM

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");


1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 25 May 2022, 08:44 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Martin
Telerik team
Share this question
or