Trying to add multiple Component containing RichTextEditor on the page with Tab,

[TCHOKOANI SIEBATCHEU NOUBISSIE Steve Emmanuel]

Hello,

Having difficulty to dd multiple Component containing RichTextEditor on the page with Tab, The first Tab component display Well the RichTextEditor  but on the second tab item, the component doesn't display the RichTextEditor  toolbar and is not editable.

Even if I call the same component with RichTextEditor on different Tab item, it will display well(the RichTextEditor ) on the first Tab item, but not on the second tab item

[Prince Oliver]

Hi Emmanuel, 

Thank you for contacting Syncfusion support. 

We have checked the reported issue in our end, unfortunately ee were unable to replicate the issue. Please find the test sample in the below link: https://stackblitz.com/edit/angular-drqooa-emutce 

To render other component inside tab component, Kindly refer to the following link: https://ej2.syncfusion.com/angular/documentation/tab/how-to/render-other-components-in-tab-using-angular-template/?no-cache=1 

If you are facing any alignment issue on RTE component, we suggest you to refresh the RTE component on Tab’s selected event. Kindly refer to the following API references. 

RTE’s refresh method: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#refresh 

Tab’s selected event: https://ej2.syncfusion.com/angular/documentation/api/tab/#selected 

Kindly check the above attached sample and reference links. If you still face any issues, kindly revert to us by modifying the above sample to replicate the issue or provide your own sample. It will help us provide prompt solution.  

Regards, 

Prince 

[TCHOKOANI SIEBATCHEU NOUBISSIE Steve Emmanuel]

""Hello Prince.

Please see below a part of my code component :

<div class="row ">

                                <div class="col-md-6 col-xs-6 col-sm-6  col-lg-6">

                                    <label class="label label_required_font  ">{{'Slider_Item.Form_label_SliderItem_Message_Slider_Item' | translate }}</label>

                                    <ejs-richtexteditor  [height]='height' id='iframeRTE'  

                                                        [readonly]="SliderItem_Message_state" [(value)]='SliderItem_Message'

                                                        [toolbarSettings]='tools'></ejs-richtexteditor>

                                   

                                </div>

                                <div class="col-md-6 col-xs-6 col-sm-6  col-lg-6 no-padding no-margin">

                                    <label class="label label_required_font no-margin no-padding">{{'Slider_Item.Form_label_SliderItem_Message_Eng_Slider_Item' | translate }}</label>

                                    <!--[(ngModel)]-->

                                    <ejs-richtexteditor id='iframeRTE2' [readonly]="SliderItem_Message_state"   [toolbarSettings]='tools'  [(ngModel)]='SliderItem_Message'></ejs-richtexteditor>

                                </div>

                            </div>

This component is called inside 2 Tab item .

On the First, everything is displaying well, on the second tab item, toolbar does not appear and can't be editable(this occur when ejs-richtexteditor "height" is setup or "iframeSettings"  property )

Main issue is with ejs-richtexteditor on the second Tab or When above property are setup

In Addition, the first line of the text is overlay by the toolbar, so not visible till I move to the second line

<ejs-tab id="tab_default" heightAdjustMode='Content'>

                    <e-tabitems>

                        <e-tabitem [header]='headerText[0]' content="#idv1">

                        </e-tabitem>

                        <e-tabitem [header]='headerText[1]' content="#idv2">

                        </e-tabitem>

                        <e-tabitem [header]='headerText[2]' [content]="contentTab3"></e-tabitem>

                    </e-tabitems>

                </ejs-tab>

   <div id="idv1" style="display:none">

                    <form-slider_item> </form-slider_item>

                </div>

                <div id="idv2" style="display:none">

                    <form-slider_item> </form-slider_item>

                </div>

Thanks

[Prince Oliver]

Hi Emmanuel,  

Thank you for your update. 

We have checked you shared code snippet. It seems that you have rendered the component outside and then rendered it as the tab content. Hence this solution has caused the DOM calculation issue inside the Tab control which led to the reported issue with RichTextEditor component . So, we suggest you use the <ng-template> to render the content in the tab to resolve the issue. Kindly refer to the following code snippet. 

<ejs-tab id="tab_default" heightAdjustMode='Content'> 

  <e-tabitems> 

    <e-tabitem [header]='headerText[0]'> 

      <ng-template #content> 

        <form-slider_item> </form-slider_item> 

      </ng-template> 

    </e-tabitem> 

    <e-tabitem [header]='headerText[1]'> 

      <ng-template #content> 

        <form-slider_item> </form-slider_item> 

      </ng-template> 

    </e-tabitem> 

  </e-tabitems> 

</ejs-tab> 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-drqooa-cnvorq 

Please let us know if you need any further assistance on this. 

Regards, 

Prince