Rich Text Editor - Unclickable text area

[Lee Stevens]

I  have a grid using the dialog edit mode, I have used a template for the edit form; within that, there is a RichTextEditor. 

When the dialog opens, the RichTextEditor text area is unclickable (The toolbar is fine), inspecting the page enables the text area and it can then be clicked. 

Similarly, once I have edited some rich text and saved it, if I then edit again the rich text area is again unclickable, however this time it is because the style height for the div with class e-rte-content has been set to 0px.

Sample attached to replicate both issues.

Attachment: RichText__Shrinking_b68acf09.zip

[Revanth Krishnan]

Hi Lee, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query and we are able to reproduce the issue “Rich Text Editor is unclickable” in both the reported scenarios in the shared sample and this issue occurred because the height is not calculated properly. This can be resolved by calling the ‘RefreshUI’ method of the Rich Text Editor in the ‘Created’ event. We have modified the shared sample for your reference, 

 

Code Snippet: 

<SfGrid DataSource="@GridSource" TValue="GridData" AllowPaging="true" Toolbar="Toolbaritems"> 

    . . . 

    <GridEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Dialog"> 

        <Template> 

            . . . 

                        <SfRichTextEditor @ref="rteObj" @bind-value="@edit.RichDescription" Height="400"> 

                            <RichTextEditorToolbarSettings EnableFloating="false" Items="@Tools" /> 

                            <RichTextEditorEvents Created="@rteCreated"></RichTextEditorEvents> 

                        </SfRichTextEditor> 

                    . . . 

        </Template> 

    </GridEditSettings> 

</SfGrid> 

 

@code{ 

    SfRichTextEditor rteObj; 

    . . . 

    . . . 

    public void rteCreated() 

    { 

        this.rteObj.RefreshUI(); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RichText_-_Shrinking-343256919 

 

Please check the above code snippet and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth