syncfusion rich text box control tools section hiding when updating the content from external file

Question

I am exploring the syncfusion richtext editor control using angular for new development purpose. In one scenario I need to upload content from the external file upload, that time richtext box tools section all hidden by automatically.

In initial page load all tools are visible in page.

Initial Load view

When upload the content from the external file upload tools section are gone.

Tools missing after update the content with external file text

in html file I have below code where I am adding "fileContent"

 <ejs-richtexteditor
    #syncRTE
    id="defaultRTE"
    [toolbarSettings]="tools"
    [quickToolbarSettings]="quickTools"
    [fileManagerSettings]="fileManagerSettings"
    [innerHtml]="fileContent"
  >
  </ejs-richtexteditor>

If I use any constant html from component its not hiding the tools section.

 fileContent: SafeHtml = `<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title></title>
<body></body>
</html

Problem is when I try to update fileContent from the file upload scenario tools section in the syncfusion richtext box controls are missing.

  onUpload() {
    let myReader: FileReader = new FileReader();
    myReader.onloadend = () => {
      let str = myReader.result?.toString() || '';
      this.fileContent = str;
    };
    myReader.readAsText(this.file);
  }

score 0 · Answer 1 · answered Dec 07 '22 at 11:58

Issue got resolved by adding ngModel instead of InnerHTML to bind the value.

  <ejs-richtexteditor
    #syncRTE
    id="defaultRTE"
    [toolbarSettings]="tools"
    [quickToolbarSettings]="quickTools"
    [fileManagerSettings]="fileManagerSettings"
    [(ngModel)]="fileContent"
  >
  </ejs-richtexteditor>

syncfusion rich text box control tools section hiding when updating the content from external file

1 Answers1