Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 25 Oct 2024 19:16 by Charles
Frank
Created on: 01 Feb 2022 19:42
Category: Editor
Type: Feature Request
15
Resizable Editor

Hi,

I tried looking through the docs and api reference for the Blazor Editor, but I can't seem to find any resizable property like the one found in the ASP.NET Core component here: ASP.NET Core Editor - Api Reference | Telerik UI for ASP.NET Core

I just wanted to check that this feature is not included in the editor for Blazor before I submitted a feature request. I tried to search the requests as well and I didn't see this request listed. 

If this feature does not exist, do you know if it is being currently considered for a future release or if there is a workaround?

Thank you,

Frank

3 comments
Charles
Posted on: 25 Oct 2024 19:16

I'm adding my vote to be able to resize the editor without having to resort to CSS or javascript trickery.

This seems like basic functionality and frankly I'm surprised it's not here already.

Frank
Posted on: 02 Feb 2022 14:15

Hi Dimo,

The auto height feature with min/max height in css with the editor in div mode is a good enough work around for now. Thank you for the help.

ADMIN
Dimo
Posted on: 02 Feb 2022 08:57

Hi Frank,

Indeed, there is no open feature request for a resizable Editor. I converted your ticket to a public feature request for your convenience.

I also need to admit that we don't have this feature in our short-term backlog for the next few months. This may change, depending on customer demand (e.g. the number of votes here).

In the meantime, I can suggest the following workarounds:

Editor in Div EditMode

It is possible to set "auto" Height to the Editor, or not set any Height at all. This will make the component expand automatically, depending on its content. You can apply some min/max height restrictions with a Class:

<TelerikEditor EditMode="EditorEditMode.Div" Class="resizable-editor" />

<style>
    .resizable-editor {
        min-height: 200px;
        max-height: 400px;
    }
</style>

 

Editor in Iframe EditMode

In this case, the Editor has a default Height of "250px". The editable area is a separate web document inside an <iframe>. To achieve flexible height in this case, you will need some JavaScript trickery.

  1. Use the Editor's ValueChanged event. and consider a bit larger DebounceDelay to improve performance.
  2. Invoke a JavaScript function. Optionally, pass the Editor ID as an argument.
  3. Find the iframe DOM element with a query selector.
  4. Remove the current iframe height, if already set.
  5. Obtain reference to the document of the iframe.
  6. Obtain reference to the <html> element of the iframe.
  7. Measure the scroll height of the <html> element and set it as the iframe height. Or, set any height that you prefer.

Razor

@inject IJSRuntime jsRuntime  

<TelerikEditor EditMode="EditorEditMode.Iframe"
               Height="auto"
               Id="expanding-editor"
               ValueChanged="@ResizeEditor" />

@code {
    private async Task ResizeEditor(string newValue)
    {
        await jsRuntime.InvokeAsync<string>("resizeEditor", "#expanding-editor");
    }
}

JavaScript

window.resizeEditor = (editorSelector) => {
    var iframe = document.querySelector(editorSelector + " iframe");
    if (iframe) {
        iframe.style.height = "";
        iframe.style.height = iframe.contentDocument.documentElement.scrollHeight + "px";
    }
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category