Toolbar always visible and positioned, draggable editor window

3 posts, 0 answers
  1. Tayger
    Tayger avatar
    122 posts
    Member since:
    Jan 2015

    Posted 22 Nov 2015 Link to this post

     I'm working on a project using a single editor. It took me a while to find the difference of putting the editor inside a textarea and a div (inline). The div makes the toolbar window dragable and as such positionable next to the text editor window. Great, exactly what I want! The problem I have now is that the toolbar window (initially positioned left of the text window) always disappears when somewhere clicking outside the text window. Clicking inside the text window again lets the toolbar window appear over the text window (not on predefined position like on the left side). I would like to have the toolbar window always visible and present. I found out that the toolbar becomes to a widget type of: kendo.ui.Window when putting the editor is put inside a div. By this I can open() the toolbar window when required but I'd rather remove/disable the existing default logic of hiding/displaying the command line window than open() the command line window when it disappears. Is there such a possibility? I'm aware of this thread but doesn't explain how to permanently display the toolbar window:

    Nice to have: Then I thought why not let user decide where and by what size (resizable) they want the toolbar window AND text window? Furthermore it would be nice to add a header title (with document name) on top of text window. After checking the documentation of kendo.ui.Window I thought it offers this all I need:

    - pin/unpin to make it draggable over the area as it already works for the toolbar window
    - using title() function for displaying the document title above the text window

    So I put a window Widget around the editor DIV. This ended up in a weird behavior: The Window Widget appears correctly and right (not inside) of it the text window of the editor. When I drag (move) the Window Widget around, the text editor will be moved simultaneously. I would have expected to see the editor's text window inside the Window Widget not beside of it.That way I can't use the Window Widget around the textedtior window. I assume the editor got screwed up on being put inside the Window Widget. 

  2. Dimo
    Dimo avatar
    8406 posts

    Posted 25 Nov 2015 Link to this post

    Hello Tayger,

    You can force the inline Editor's toolbar to be always visible like this:

    We may include this behavior out-of-the-box in the future.

    If you need to adjust the popup toolbar's position, use the approach described in the forum thread you have mentioned, or change the top and left styles of this element:

    var toolbarPopupElement = editor.toolbar.element.closest(".k-window");

    Using an inline Kendo UI Editor inside a Kendo UI Window is possible, although not convenient, because Kendo UI Windows are designed to pop on top of other Window instances when focused. Please check:

    Thank you for the suggested feature requests. Please submit them at our feedback portal, so that others can vote for them.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Tayger
    Tayger avatar
    122 posts
    Member since:
    Jan 2015

    Posted 25 Nov 2015 in reply to Dimo Link to this post

    Excellent, Dimo, thank you! I just implemented the permanent visibility of the toolbar, worked out of the box. Sure, would be nice to have an implemented option for that. I also will try later on to wrap the editor window into a Window based on your link.

    Yes, I have some further improvements for the editor that I miss. If not already mentioned I will add them in your proposal link.

    Thank you and regards

Back to Top