RTE content disabled on Modal form

[Alexandre]

Hello,

I have a RTE control being displayed in a modal form. The problem is that the text area is not editable. I can click on the toolbar buttons, but not enter any text.

Serching the forum, I found the sugestion to use $(document).off('focusin.modal') on the show modal event, but it did not work.

Is there any solution for this problem? I am using Razor pages in ASP.NET.

Regards,

Alexandre

[Indrajith Srinivasan]

Hi Alexandre, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query “I have a RTE control being displayed in a modal form. The problem is that the text area is not editable”. The above reported scenario will be reproduced, if you have used bootstrap dialog to render RichTextEditor. We suggest you to call the refreshUI() RichTextEditor method, in the shown.bs.modal event to resolve this issue. We have also prepared a sample that tries to meet your requirements.  

 

 

<!-- Button trigger modal --> 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAddService"> 

    Launch demo modal 

</button> 

 

<div class="modal fade" id="modalAddService" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 

    <div class="modal-dialog"> 

        <div class="modal-content"> 

            <div class="modal-header"> 

                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 

                    <span aria-hidden="true">&times;</span> 

                </button> 

            </div> 

            <div class="modal-body"> 

                <ejs-richtexteditor id="rteID" created="onCreate"> 

                </ejs-richtexteditor> 

            </div> 

        </div> 

    </div> 

</div> 

 

<script> 

    var defaultRTE; 

 

    function onCreate() { 

        defaultRTE = this; 

    } 

 

    $('#modalAddService').on('shown.bs.modal', function (e) { 

        defaultRTE.refreshUI(); 

    }); 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170195/ze/RTE_inside_bootstrapModal2014838717 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Alexandre]

Hello Indrajith,

I had to make a few modifications in my code to fit your example, but it worked and solved the problem.

Thanks for your help,

Alexandre

[Vinitha Jeyakumar]

Hi Alexandre, 

 

 

We are glad that your problem has been resolved. Please get back to us if you need any further assistance. 

 

Regards, 

Vinitha