Read MS Word (.rtf) content from the server and paste into RichTextEditor

[Andrey Burda]

Hello!

I want to grab MS Word (usually in .rtf format) from the server side by calling custom API method that returns it in a format of: content="base64 string", contentType = "application/octet-stream", and then insert into RTE component. I expect it to work like as I get open .rtf file through MS Word and then copy\paste it content directly into RTE.

Basically, i have a table that lists existing files and once I click a Document Name link, the logic will get a file content fron the server and insert it into RTE.

Currently I am using "value" property and not sure how to set the content dynamically. My guess is about using a blob, but i am not certain in an approach.

I am able to convert file content into a Blob, but direct setting it as value to RTE does not work:

When I am receiving rtf file content type as "application/octet-stream" with byteArray content, I see the following text in RTE:

Thanks in advance!

[Vinitha Jeyakumar]

Hi Andrey, 

 

 

Currently, we are validating your reported query. We will update you the further details in two business days on or before 17^th November 2021. 

 

Regards, 

Vinitha 

[Vinitha Jeyakumar]

Hi Andrey, 

 

 

Currently, we are validating your reported query. We will update you the further details in two business days on or before 17^th November 2021. 

 

Regards, 

Vinitha 

[Vinitha Jeyakumar]

Hi Andrey, 

 

 

We have validated your query “Read MS Word (.rtf) content from the server and paste into RichTextEditor” 

 

We want to let you know that Rich Text Editor accepts only HTML strings as value. So, you can update the .rtf content to Rich Text Editor by converting it from .rtf to HTML content. To update the converted HTML content to the Rich Text Editor you can use the ExecuteCommand method. Please check the below sample for reference, 

 

Code snippet: 

export class Default extends SampleBase { 

  val = '<p>Test</p>'; 

  buttonClick() { 

    this.rteObj.executeCommand('insertHTML', this.val); 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section" id="rte"> 

          <div className="rte-control-section"> 

            <button 

              className="e-control e-btn dlgbtn" 

              ref={this.buttonRef} 

              onClick={this.buttonClick.bind(this)} 

              id="dialogBtn" 

            > 

              {' '} 

              Insert HTML 

            </button> 

            <RichTextEditorComponent 

              id="defaultRTE" 

              ref={(richtexteditor) => { 

                this.rteObj = richtexteditor; 

              }} 

            > 

              <Inject 

                services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} 

              /> 

            </RichTextEditorComponent> 

          </div> 

        </div> 

      </div> 

    ); 

  } 

} 

 

Sample: https://stackblitz.com/edit/react-stiujs-mrbz8z 

 

Reference for rtf to HTML conversion: https://sautinsoft.com/products/rtf-to-html/how-to-convert-rtf-to-html-csharp.php 

https://sautinsoft.com/products/rtf-to-html/examples/convert-rtf-to-html-string-csharp-vb-net.php 

 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

 

[Andrey Burda]

Thanks for the clarification.

That what i was thinking about.

[Indrajith Srinivasan]

Hi Andrey,

Welcome,

Please get back to us if you need any further assistance.

Regards,
Indrajith