How to Detect Paste and Insert Plain Text in editor?

[Olzzonne]

I'm trying to implement a feature where users can paste content as plain text, effectively stripping any formatting from the pasted content.

My goal is to:

1. Detect when a paste event occurs within the editor.
2. Prevent the default paste behavior that includes formatting.
3. Retrieve the plain text content from the clipboard.
4. Insert this plain text into the editor at the current selected component.

I've been looking into the paste event and the clipboardData object, specifically the getData('text/plain') method. I've tried but not working.

Could anyone provide guidance or examples on how to properly detect the paste event and insert the plain text content into ?

Any help or pointers in the right direction would be greatly appreciated!

Thank you.

[thanhtunguet]

I'm trying to implement a feature where users can paste content as plain text, effectively stripping any formatting from the pasted content.

My goal is to:

1. Detect when a paste event occurs within the editor.
2. Prevent the default paste behavior that includes formatting.
3. Retrieve the plain text content from the clipboard.
4. Insert this plain text into the editor at the current selected component.

I've been looking into the paste event and the clipboardData object, specifically the getData('text/plain') method. I've tried but not working.

Could anyone provide guidance or examples on how to properly detect the paste event and insert the plain text content into ?

Any help or pointers in the right direction would be greatly appreciated!

Thank you.

This library is just a wrapper of the original grapesjs library. It provides you the editor instance so that you can do everything with this.
Try to save the editor instance or access the editor instance from localStorage (You can inspect the browser console to see what's stored)