How to call method on image add and remove

[Ignacy Mielniczek]

Hi Syncfusion Team,

We would like to call a function when image is deleted or added into RTE by keyboard or mouse event, exactly:

Removing image:

     Keyboard action:

          - press Backspace,

          - press Delete,

          - press Ctrl + X

     Mouse action:

          - right click -> select Cut

Adding image:

     Keyboard action:

          - press Ctrl + Z,

          - press Ctrl + V

     Mouse action:

          - right click -> select Paste

Is it possible?

[Revanth Krishnan]

Hi Ignacy, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “To call a function when the image is deleted or added in Rich Text Editor by keyboard or mouse events”. 

 

Your requirement can be achieved by following the below steps, 

Deleting Images (Keyboard actions – Backspace, Delete, Ctrl+X) 

• In this case, the event ‘afterImageDelete’ in the Rich Text Editor can be configured to trigger the function.

 

Code Snippet: 

<ejs-richtexteditor #imageRTE id='imageRTE' (created)="onCreated($event)" (afterImageDelete)="imageDeleteEvent($event)" 

    (beforePasteCleanup)="beforePaste($event)" (actionComplete)="actionCompleteEvent($event)"> 

    . . . 

</ejs-richtexteditor> 

 

export class AppComponent { 

  @ViewChild('imageRTE') 

  private rteObj: RichTextEditorComponent; 

 

  //Method for Image Delete by keyboard 

  public imageDeleteEvent(args: any) { 

    alert('Image is deleted'); 

  } 

  . . . 

} 

 

Deleting Images (Mouse action – Cut using the context menu) 

• In this case, first the ‘created’ event in the Rich Text Editor needs to be configured.
• Inside the created event the ‘cut’ event can be bind to the content element of the Rich Text Editor.
• Inside the cut event, a condition needs to be checked to find if the image is deleted.

 

Code Snippet: 

<ejs-richtexteditor #imageRTE id='imageRTE' (created)="onCreated($event)" (afterImageDelete)="imageDeleteEvent($event)" 

    (beforePasteCleanup)="beforePaste($event)" (actionComplete)="actionCompleteEvent($event)"> 

    . . . 

</ejs-richtexteditor> 

 

export class AppComponent { 

  @ViewChild('imageRTE') 

  private rteObj: RichTextEditorComponent; 

 

  public onCreated(args: any) { 

    this.rteObj.inputElement.addEventListener('cut', this.imageDeleted.bind(this)); 

  } 

 

  //Method for Image Delete by context menu 

  public imageDeleted(args: any) { 

    if (args.target.tagName === 'IMG') { 

      alert('Image is deleted'); 

    } 

  } 

 

  . . . 

} 

 

Adding Images (Paste – Ctrl+V, Paste using the context menu) 

• In this case, the event ‘beforePasteCleanup’ event in the Rich Text Editor needs to be configured.
• Then inside the event, the condition needs to be checked to ensure if the content, pasted is an image.

 

Code Snippet: 

<ejs-richtexteditor #imageRTE id='imageRTE' (created)="onCreated($event)" (afterImageDelete)="imageDeleteEvent($event)" 

    (beforePasteCleanup)="beforePaste($event)" (actionComplete)="actionCompleteEvent($event)"> 

    . . . 

</ejs-richtexteditor> 

 

export class AppComponent { 

  . . . 

  // Method for image added by pasting (both ctrl+v and using context menu) 

  public beforePaste(args: any) { 

    var tempElem = document.createElement('div'); 

    tempElem.innerHTML = args.value; 

    if (tempElem.childElementCount === 1 && tempElem.children[0].tagName === 'IMG') { 

      alert('Image added'); 

    } 

  } 

  . . . 

} 

 

Adding Images (using the Ctrl + Z) 

• In this case, the event ‘actionComplete’ event in the Rich Text Editor needs to be configured.
• Then inside the event, the condition needs to be checked to ensure if the action is ‘undo’ and then if the content added is an image using undo.

 

Code Snippet: 

<ejs-richtexteditor #imageRTE id='imageRTE' (created)="onCreated($event)" (afterImageDelete)="imageDeleteEvent($event)" 

    (beforePasteCleanup)="beforePaste($event)" (actionComplete)="actionCompleteEvent($event)"> 

    . . . 

</ejs-richtexteditor> 

 

export class AppComponent { 

  . . . 

  //Method for image added by using ctrl + Z 

  public actionCompleteEvent(args: any) { 

    if (args.requestType === 'Undo' && args.elements[0].tagName === 'IMG') { 

      alert('Image is added'); 

    } 

  } 

} 

 

We have prepared a sample for all the cases for your reference, 

Sample: https://stackblitz.com/edit/angular-y8seqm?file=app.component.ts 

 

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

 

Regards, 

Revanth