angular ngModelChange support for RTE

[MIHIR DASH]

Hi,

I am trying to achieve a functionality where i have three RTEs with accordion. I have one RTE outside the accordion and two RTEs inside the accordion. What I want is if I type something inside the first RTE, then the other two RTEs should get auto filled with the same text.

I have done something in my code, but it doesn't work. Below is my code.

// RTE outside the accordion ( "this RTE is the driver for other two RTEs. If I type something in this RTE, then the other two should get auto filled with same text" )

<ejs-richtexteditor [toolbarSettings]='tools' [(ngModel)]="_clientViewText" (ngModelChange)="_phoneViewText = _onlineViewText = _clientViewText"

                autoFocus={true} placeholder="Insert text here.."></ejs-richtexteditor>

// RTEs inside accordion

<ejs-accordion>

<e-accordionitems>

<e-accordionitem header='Settings'>

<ng-template #content>

  <div class="row view-text-row">

<div class="col-md-7 col-sm-12 col-xs-12">

  <label class="addClientLabel">{{"QUESTION.QUESTION_LABELS.ONLINE_VIEW_TEXT" | translate}}</label>

  <!-- syncfusion rte -->

  <ejs-richtexteditor [toolbarSettings]='tools' [(ngModel)]="_onlineViewText" placeholder="Insert text here.."></ejs-richtexteditor>

</div>

  </div>

  <div class="row view-text-row">

<div class="col-md-7 col-sm-12 col-xs-12">

  <label class="addClientLabel">{{"QUESTION.QUESTION_LABELS.PHONE_VIEW_TEXT" | translate}}</label>

  <!-- syncfusion rte -->

  <ejs-richtexteditor [toolbarSettings]='tools' [(ngModel)]="_phoneViewText" placeholder="Insert text here.."></ejs-richtexteditor>

</div>

  </div>

</ng-template>

</e-accordionitem>

</e-accordionitems>

          </ejs-accordion>

Can you please take a look into it ?

thanks..

[MIHIR DASH]

Hi,

Can you please tell me if there is any update on the mentioned issue??

Thanks..

[Prince Oliver]

Hi Mihir, 

Thank you for contacting Syncfusion support. 

We can achieve your requirement using ngModel or using the value property in the RTE control. Kindly refer to the following code snippet. 

<!-- first RTE outside accordion--> 

<ejs-richtexteditor id='Default' height='250px' [toolbarSettings]='tools' [(ngModel)]="_clientViewText" > 

    <ng-template #valueTemplate> 

        The rich text editor component is WYSIWYG. 

    </ng-template> 

</ejs-richtexteditor> 

<br> 

<ejs-accordion> 

    <e-accordionitems> 

        <e-accordionitem header='RichTextEditor'> 

            <ng-template #content> 

                <!-- first RTE inside accordion--> 

                <ejs-richtexteditor id='Default2' height='250px' [toolbarSettings]='tools' [ngModel]="_clientViewText"> 

                    <ng-template #valueTemplate> 

                        The rich text editor component is WYSIWYG. 

                    </ng-template> 

                </ejs-richtexteditor> 

<br> 

                <!-- second RTE inside accordion--> 

                <ejs-richtexteditor id='Default3' height='250px' [toolbarSettings]='tools' [ngModel]="_clientViewText"> 

                    <ng-template #valueTemplate> 

                        The rich text editor component is WYSIWYG. 

                    </ng-template> 

                </ejs-richtexteditor> 

 

            </ng-template> 

        </e-accordionitem> 

    </e-accordionitems> 

</ejs-accordion> 

In the above code we have enable two-way binding only for the first RTE. So the content changes in the first will be reflected on second and third RTE and not the other way. Also note that the changes will be reflected on other RTEs only upon focus out. 

We have prepared a sample for your requirement, please find the sample at the following location: https://stackblitz.com/edit/rte-sample-ngmodel 

Regards, 

Prince