3

I was trying to use ngx-editor for rich text editor but I want to disable the property of pasting images in the editor. Although I have removed the insert image button from the toolbar it is still pasting the images in the editor.

Link to ngx-editor doc: https://sibiraj-s.github.io/ngx-editor/#/

Tomerikoo
  • 18,379
  • 16
  • 47
  • 61
Aishwarya Maurya
  • 31
  • 4

1 Answers1

2
@HostListener('paste', ['$event'])
private pasteFromClipboard(event: KeyboardEvent): void {
  event.preventDefault();
    
  if (this.insertClipboardImage(event)) {
    return;
  }
}

private insertClipboardImage(event): File | null{
  const pastedImage = getPastedImage(event);

  if (!pastedImage)
    return null;

  return pastedImage;
}

private getPastedImage(event): File | null {
  if (event.clipboardData) {
    if (event.clipboardData.files && event.clipboardData.files.length && isImageFile(event.clipboardData.files[0])) {
      return event.clipboardData.files[0];
    }
  }

  return null;
}

private isImageFile(file: File): boolean {
  return file.type.search(/^image\//i) === 0;
}
lzhec
  • 21
  • 3
  • 2
    While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Suraj Rao Nov 13 '21 at 14:27