Resizing the Editor

1 Answer 23 Views
Editor
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Omar asked on 03 Feb 2024, 04:22 PM

Hello,

I'm a newcomer to Telerik, and I'd appreciate it if you could assist me without suggesting that the documentation is clear enough.

Is there an uncomplicated method to enable resizing for the Editor, similar to the one used in your forum's editor?

I'm concurrently working with Syncfusion controls, and I've been able to implement a resizable editor easily using the code provided below with their control. 

How can I achieve the same functionality with your control?

Regards,

Omar

@using Syncfusion.Blazor.RichTextEditor
<div class="control-section resize">
    <SfRichTextEditor EnableResize="true" Height="250px">
        <p>
            The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
    </SfRichTextEditor>
</div>
<style>
    .e-richtexteditor {
        max-width: 880px;
        min-width: 200px;
        min-height: 170px;
        max-height: 400px;
    }
    .control-section.resize .e-popup.e-popup-open.e-dialog {
        max-height: 410px !important;
    }
</style>

Omar
Top achievements
Rank 2
Iron
Iron
Iron
commented on 05 Feb 2024, 08:44 PM

Any one.

1 Answer, 1 is accepted

Sort by
0
Accepted
Omar
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Feb 2024, 07:44 PM

I found a way to do that using CSS. 


<TelerikEditor @ref="Editor" 
               Tools="@ToolCollection"
               @bind-Value="Description"
               class="myTelerikEditor"
               EditMode="@EditorEditMode.Div"
                >
    <EditorSettings>
        <EditorPasteSettings ConvertMsLists="true"
                             RemoveMsClasses="true"
                             RemoveMsStyles="true"
                             RemoveHtmlComments="true"
                             StripTags="@StripTags"
                             RemoveAttributes="@RemoveAttributes">
        </EditorPasteSettings>
    </EditorSettings>
</TelerikEditor>

 

The CSS

 


    .myTelerikEditor div.k-editor-content div.k-content {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: large;
        width: 100%;
        height: 200px;
        resize: vertical !important;
    }
    .myTelerikEditor div.k-editor-content {
        min-height: 200px !important;
        max-height: 1000px !important;
        height: 100% !important;
    }
    .myTelerikEditor {
        height: 100%;
        min-height: 200px !important;
        max-height: 1000px !important;
        height: 100% !important;
        resize: vertical !important;
    }

 

Hristian Stefanov
Telerik team
commented on 07 Feb 2024, 07:09 AM

Hi Omar,

I'm happy to see you quickly resolved the matter on your own.

Thank you for sharing it here, publicly, so other developers can benefit from it.

Kind Regards,

Hristian

Tags
Editor
Asked by
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or