Using images

[adrian]

I want to use the richTextEditor to create e-mails with inline images, so far I was able to integrate the RichTextEditor component and save the images in the server using the insertImagesSetting saveURL. From the saveURL call, the server sends the new image name and url, my question is how can I retrieve this information sent from the server and use it inside the RichTextEditor instead of the blob value

<img src="blob:http://ej2.syncfusion.com/3ab56a6e-ec0d-490f-85a5-f0aeb0ad8879" >

I need to update it to something like 

<img src="https://ej2.syncfusion.com/assets/chicken.jpg >

[Narayanasamy Panneer Selvam]

Hi Adrian,

We have validated your query. Yes, you can get saved image patch back at client end. You need to configure path too in `insertImageSettings` API. 

 

Once the image has uploaded successfully you will get uploaded file information back on `imageUploadSuccess` event. Now the image will be saved into RTE with image saved path URL instead of blob. 

 

Refer below code example: 

[app.component.html] 

<ejs-richtexteditor id='defaultRTE' #sample [insertImageSettings]='insertImageSettings' [toolbarSettings]='toolbarSettings' (imageUploadSuccess)='onImageUploadSuccess($event)'> 

    <ng-template #valueTemplate> 

    <p>The RichTextEditor triggers events based on its actions. </p> 

    </ng-template> 

</ejs-richtexteditor> 

 

 

[app.component.ts] 

import { Component, ViewChild } from '@angular/core'; 

import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent  } from '@syncfusion/ej2-angular-richtexteditor'; 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.compoenent.html', 

    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService ] 

}) 

export class AppComponent  { 

@ViewChild('sample') public rteObj: RichTextEditorComponent; 

 

public toolbarSettings: Object = { 

  items: ['Bold', 'Italic', 'Underline', 'StrikeThrough','|', 

      'FontName', 'FontSize', 'FontColor', 'BackgroundColor', 

      'LowerCase', 'UpperCase', '|', 

      'Formats', 'Alignments', 'OrderedList', 'UnorderedList', 

      'Outdent', 'Indent', '|', 

      'CreateLink', 'Image', '|', 'ClearFormat', 'Print', 

      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'] 

}; 

public insertImageSettings: object = { 

    saveUrl: "[SERVICE_HOSTED_PATH]/api/uploadbox/Save", 

    path: "../Images/" 

}; 

 

public onImageUploadSuccess = (args: any) => { 

    if (args.e.currentTarget.getResponseHeader('name') != null) { 

        args.file.name = args.e.currentTarget.getResponseHeader('name'); 

        let filename: any = document.querySelectorAll(".e-file-name")[0]; 

        filename.innerHTML = args.file.name.replace(document.querySelectorAll(".e-file-type")[0].innerHTML, ''); 

        filename.title = args.file.name; 

    } 

} 

 

 

 

[On Server side] 

[AcceptVerbs("Post")] 

public void Save() 

{ 

    try 

    { 

        var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"]; 

        if (httpPostedFile != null) 

        { 

            var fileSave = System.Web.HttpContext.Current.Server.MapPath("~/Images"); 

            if (!Directory.Exists(fileSave)) 

            { 

                Directory.CreateDirectory(fileSave); 

            } 

            var fileName = Path.GetFileName(httpPostedFile.FileName); 

            var fileSavePath = Path.Combine(fileSave, fileName); 

            while (System.IO.File.Exists(fileSavePath)) 

            { 

              fileSavePath = Path.Combine(fileSave, fileName); 

            } 

            if (!System.IO.File.Exists(fileSavePath)) 

            { 

                httpPostedFile.SaveAs(fileSavePath); 

                HttpResponse Response = System.Web.HttpContext.Current.Response; 

                Response.Clear(); 

                Response.Headers.Add("name", fileName); 

                Response.ContentType = "application/json; charset=utf-8"; 

                Response.StatusDescription = "File uploaded succesfully"; 

                Response.End(); 

            } 

        } 

    } 

    catch (Exception e) 

    { 

        HttpResponse Response = System.Web.HttpContext.Current.Response; 

        Response.Clear(); 

        Response.ContentType = "application/json; charset=utf-8"; 

        Response.StatusCode = 204; 

        Response.Status = "204 No Content"; 

        Response.StatusDescription = e.Message; 

        Response.End(); 

    } 

} 

  

 

Get back to us if you need further assistance on this. 

Regards,
Narayanasamy P.