How to save both formatted text and images to the server using RichTextEditor

[spirit]

Hi  Great Syncfusion Team,

Please we have requirement to save both formatted text and images to the server and also load from the server too respectively. I discovered the image is store in browser memory using    src="blob:http://localhost:3000/40203035-d056-4976-a8e6-8c105c7f7e1e"

similar component react-quill stores in <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABDBJREFUeNq8V22IVFUYfs69Z+bOnf1QbLXNZdV1NaKW1CX7YM2s3W1NM/rCMCIlFQqjfqVUYCT0QUVQEElu/kgwAgXxYyvXVAjxh6FFYpnuGtHS1uZaOrPzde89vefcnUmd+7XRzguHO8zce5/nfZ73fc8ZJoTAyFvNHQDW0OqipWN8w6b1Ja3u5Pq+Ayz1ZtMy6LHt7JqGBMwaDrBxxhdA5pIlzg9kYRdWcRJgDatrTMBIcuvMF+4N4xoMfFYXZ3XTTGewb7VGFrQxo4pbfb2ETeoIZ5yXDessOZBI6oR9h+YIEQdjLnjFQiglCFvnsgijhj6tDbEbHoQ+/S4wPU6c84BDGfX3wvpxF+zfjo+NBmFzJwIBvWE+EovfV1e/3407X1LSZntfgDN0KhIBic2FE0wgPn8dEve+TSiUcWYY+eNbYPcfgJMeUiowc5IsKsTmPaWu1TMWIrNrFQqndoYr4IQoEG9di8R976nP+W82I/fVyxC5v91aJmDEq5XsFhHKff0GEl3vInbzEzAf2Q5ReAjWmZ5QBTQ/Anr9nBJ47tBGZHueLYHLiN20HLGWFf9mQ+rIzPPHPiB2OsyHt4HVNEQg4GOB0fmOkt06vYeye728m6uvVevqyO53a4AZE5C4Z1MwAceHgDalBbzpbtWasqi8QqPsPDOkzsjsXu2qRHYoqwIJyOFwVcRmL3Xf9csROMNnvedZdT20Wm+J7YFjsAe/U1bw5q4ACxxvBfTpC9XV+vWo/0AlAqxmqv+O8/NB912NtwcqwL0IsKrJbmGlfvcGJ+m1iTPAqAt8Xz76LKuqDyHgYYHIjrYaFdIVvk9sQnzBesTnrFQFWrzn8u4okTRq3Q+FVKAF3PZQQKQHXcC6693r5Btp0r1Yajvr3CFYP+xUw8YLXN3z0x7VvoEHAz8LZPFJMFVA3IQ2oVFJKWdBgWa+SA2GTrmqlQdDJ+JoG5ZbIEFkO8kWMm57Ts34kW2dahpGAVdBxM1HP4PRtiGAgOM9iiVI/sRWxG95GsaiV2BRRcvW8ixIqoGaDed9QYz215SVmb3PqKQiT0Lpn7g0oIot+fi+Umv+l4hR0Zr3fxjdguJsH/n0AYh8SlkhPTWXfQT9utYxE3D+OInc4VejW1AqRppm6a0LkFy+A9qkWWrLlUsqU+zz9JZbcXETL3u2dqPldgPVT2bHYyqRMW1Gl7NPbZ7nWkKqFAeRVCJMDbkzFlUMGEQRjmRWRu2IcvGZHWogaVNby4rqil3x8+fdrTnsRBSmQBkXOnyoCDn+hYGXinAsh9L//WwcdCKqRKgipINhXshWZHoFoZnKnrBtqcCR1IVhi89sp++1iize3In0XxdoLxJH5R+T7v7vT7Q3tcxF7ewlvBL5X/xzyDp38tscYX/MpBSHn9SWjP4976iQB7KVuhd94vT8I8AAxhFWicUZlh0AAAAASUVORK5CYII=">

How do i get the RichTextEditor images to Base 64 string as i dont want to mix-match components. The SaveUrl and path saves only the images and reading it back from server its hard to re-arrange the texts and images to what was sent to the server.I will be glad if i could render as base64 string on the browser.

[Narayanasamy Panneer Selvam]

Hi Spirit, 

 

Greetings from Syncfusion support. 

 

We have analyzed your query, by default image saved as blob format in RichTextEditor. You can achieve requirement by saving image in base64 format by configuring saveFormat as “Base64“on “insertimagesettings“ as follows, 

Code example:  

export class Default extends SampleBase { 

constructor() { 

    this.imageSettings = { 

    saveFormat: "Base64" 

    } 

} 

render() { 

    return ( 

    <RichTextEditorComponent insertImageSettings={this.imageSettings}> 

        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/> 

    </RichTextEditorComponent> 

    ) 

} 

} 

 

We have prepared sample for your reference, get it from below link 

https://stackblitz.com/edit/react-joumd1-n6xzu6?file=index.js 

Note: you can use base64 format  for small size images usage in RTE, if we upload bigger images browser will slow to load base64 string. 

if you need to upload bigger size images in RTE, can use saveUrl and path property in InsertImageSettings API 

API Reference: 

saveUrl: https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/imageSettingsModel/#saveurl 

path: https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/imageSettingsModel/#path 

Kindly let us know if the provided information is not helps you to achieve your requirement. 

 

Regards, 

Narayanasamy P.