We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147926 Sep 27,2019 07:07 PM UTC Sep 30,2019 12:38 PM UTC React - EJ 2 1
loading
Tags: RichTextEditor
spirit
Asked On September 27, 2019 07:07 PM UTC

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 [Syncfusion]
Replied On September 30, 2019 12:38 PM UTC

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 
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: 
Kindly let us know if the provided information is not helps you to achieve your requirement. 
 
Regards, 
Narayanasamy P. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon