Two RichTextEditor databinding value is wrong

[lorryl]

I have two RichTextEditor controls in one page, after load data, the second RichTextEditor's value is same with first's.

I am sure that this is your control problems. How do I fix the problem ?

[Deepa Loganathan]

Hi Lorryl, 

Thank you for contacting Syncfusion Support. 

We have tried to replicate the reported issue with a sample by binding different model values on RTE and can confirm that the RTE contents are updated based on the model values. Please refer the below code used in our sample.  

<div class="control-section"> 

  <ejs-accordion> 

        <e-accordionitems> 

          <e-accordionitem> 

            <ng-template #header> 

              <div>First RTE</div> 

           </ng-template> 

            <ng-template #content> 

              <div> 

             <ejs-tab id="tab_default"> 

                <e-tabitems> 

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

                      

                    </e-tabitem> 

                </e-tabitems> 

            </ejs-tab> 

              </div> 

              <div>   

          <ejs-richtexteditor [(ngModel)]='contentDOC' >        

         </ejs-richtexteditor> 

              </div> 

            </ng-template> 

          </e-accordionitem> 

          <e-accordionitem> 

            <ng-template #header> 

              <div>Second RTE</div> 

            </ng-template> 

            <ng-template #content> 

               <div> 

             <ejs-tab id="tab_default2"> 

                <e-tabitems> 

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

                      

                    </e-tabitem> 

                </e-tabitems> 

            </ejs-tab> 

              </div> 

              <div>   

               <ejs-richtexteditor [(ngModel)]='contentDetail'> 

              </ejs-richtexteditor></div> 

            </ng-template> 

          </e-accordionitem> 

        </e-accordionitems> 

      </ejs-accordion> 

 

</div> 

   <ng-template #content1> 

                            Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets". 

        </ng-template> 

                <ng-template #content2> 

                            Facebook is an online social networking service headquartered in Menlo Park, California.  

                        </ng-template> 

 

For your reference, please find the sample that we tried at our end.  

Sample: https://stackblitz.com/edit/angular-1wgugc-3lavpz  

Also, the reported issue usually occurs in case if there exists any dependency in model values of RTE. So please check this in your application and if the issue persists, kindly revert with the following details, so that we can proceed further. 

1.       The component and view page of your application 

2.       Issue replicated video 

3.       If possible, the sample for replicating the issue. 

The details you provide will help us in better investigating the reported issue and provide you a prompt solution at the earliest. 

Regards, 

Deepa L. 

[lorryl]

The following steps will show the binding problem.

1. I write "a1" in the first richtexteditor

2. I click the second richtexteditor, and write "a2", within period no touch other controls.

3. I click save button, find the first binding "contentDoc" value is empty ? Maybe it is a focus problem ?

[Prince Oliver]

Hi Lorryl, 

Thank you for your update. 

Yes, the RTE value is updated once we focus out of the control. To avoid this issue, we suggest to use the value property instead of ngModel. Kindly refer to the following code 

<ejs-richtexteditor [(ngModel)]='contentDOC' [(value)]='contentDOC' >        

  </ejs-richtexteditor> 

Kindly refer to the following link for sample: https://stackblitz.com/edit/angular-1wgugc-ytmg9r  

Regards, 

Prince 

[lorryl]

1. When I use both ngModel and value to binding, it will show the first picture error.

2. I found when write into value between two richtexteditor, one of the richtexteditor's isFocusOut property is false, and another's is true, whatever I use ngmodel or value.

So I plan to use the follow code to get the correct html vaue, and solve the problem.

document.getElementById("rteDoc_rte-edit-view").innerHTML

3. I also found the image dialog is part hidden when I use the image function, please see the second picture.

<ejs-richtexteditor [(ngModel)]='contentDOC' [(value)]='contentDOC' >        

  </ejs-richtexteditor> 

[Prince Oliver]

Hi Lorryl, 

Thank you for your update. 

We could not replicate the reported console error when using both ngModel and value binding. Kindly provide additional information on the issue. you can enable the image dialog fully by using the toolbar click event and setting isModal as true in the disalog’s instance 

public ontoolbarClick(rte: RichTextEditor) { 

    if (rte.imageModule.dialogObj) { 

        rte.imageModule.dialogObj.isModal = true; 

    } 

} 

Regards, 

Prince 

[lorryl]

Thanks you for your reply.

I want to ask a question about the RichTextEditor translate.

I've saw the document below:

https://ej2.syncfusion.com/documentation/rich-text-editor/globalization

If I want to use Chinese language, I must put the richtexteditor language into L10n load, 

so I want to ask: Is there a Chinese version about the richtexteditor language ? There are so many button text to tranlate from English to Chinese, it is really heavy work to do.

[lorryl]

Hi Lorryl, 

Thank you for your update. 

We could not replicate the reported console error when using both ngModel and value binding. Kindly provide additional information on the issue. you can enable the image dialog fully by using the toolbar click event and setting isModal as true in the disalog’s instance 

public ontoolbarClick(rte: RichTextEditor) { 

    if (rte.imageModule.dialogObj) { 

        rte.imageModule.dialogObj.isModal = true; 

    } 

} 

Regards, 

Prince 

I set isModal, still not work.

[Keerthana Rajendran]

  

Hi Lorryl,  

 

Thank you for your update.  

 

Query: If I want to use Chinese language, I must put the richtexteditor language into L10n load,  so I want to ask: Is there a Chinese version about the richtexteditor language ? There are so many button text to tranlate from English to Chinese, it is really heavy work to do.  

 

You can use our list of translated words for each locale. It is available in the below Gitlab location   

https://github.com/syncfusion/ej2-locale/tree/master/src   

 

Kindly refer to the following link for Chinese locale file: https://github.com/syncfusion/ej2-locale/blob/master/src/zh-CN.json    

 

You can use the above file in your end similar to our documentation: https://ej2.syncfusion.com/documentation/rich-text-editor/globalization   

 

Query: I set isModal, still not work.  

 

We were unable to replicate the issue in our end. We have also checked by increasing the height of RTE and sample works fine in our end. Please check the below sample and if issue persists, kindly modify the sample based on your scenario to replicate the issue in our end. It will help us provide solution at the earliest.  

 

Sample: https://stackblitz.com/edit/angular-1wgugc-wt8gam     

 

Please let us know if require any further assistance on this.  

 

Regards,  

Keerthana. 

 

[lorryl]

Hi,

As the follow, I set richtexteditor's height is 290, and add allowDragging is true, after dragging the image dialog, part of the image dialog is hidden.

It doestnot matter when I set the height is large, so I just report the problem for you.

And I want to ask another question:

Does the rich editor has a real preview function ? My richtexteditor data is saved to sql on website backend , I want to review the front end website in backend website,

do you have any idear ?

[Prince Oliver]

Hi Lorryl,   

  

Thank you for your update. 

Query 1: I set richtexteditor's height is 290, and add allowDragging is true, after dragging the image dialog, part of the image dialog is hidden. It doestnot matter when I set the height is large, so I just report the problem for you.. 

 

We are considering this as an issue in our end. This fix for the issue will be included in our upcoming patch release. 

 

Query 2: Does the rich editor has a real preview function ? My richtexteditor data is saved to sql on website backend , I want to review the front end website in backend website, do you have any idear ?. 

 

In RichTextEditor, the content can be passed to the backend through XMLHttpRequest Post. The content will be sent to corresponding method in the controller and this value can be validated based on your requirement. Kindly refer to the following code snippet.  

 

<div> 

    <div>@Html.EJS().RichTextEditor("default").Value((string)ViewBag.value).Render()</div> 

    <div> <button id="btn">save content</button></div> 

</div> 

 

<script> 

document.getElementById('btn').addEventListener('click', function () { 

  var obj = document.getElementById('default').ej2_instances[0]; 

  var value = JSON.stringify({ text: obj.value }); 

  const Http = new XMLHttpRequest(); 

  const url = '@Url.Action("Save")'; 

    Http.open("POST", url); 

    Http.setRequestHeader('Content-Type', 'application/json'); 

    Http.send(value); 

}); 

</script> 

 

[HttpPost] 

        public ActionResult Save(string text) 

        { 

            string RootPath = Server.MapPath("~/data.txt"); 

            StreamWriter wirteFile = new StreamWriter(RootPath, true); 

            wirteFile.WriteLine(text); 

            wirteFile.Close(); 

            wirteFile.Dispose(); 

            return View("Index"); 

        } 

 

 

The content of RTE in received in the controller is shown below 

 

 

In case your require to process HTML content, then you can get Html through getHtml() method of RTE. We have attached a sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/140680/ze/RTE-1705211076  

 

Note: We have saved the RTE content in a text file for your reference. You can process the content in backend based on your requirement. 

 

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

Regards, 

Prince