How Can I Automatically Remove Formatting When Users Paste Into A Summernote Field?

Wappler General How To
#1

My app has various summernote based fields where my non-tech savvy users paste content from all sort of other sources. If they paste it with formatting then they create a right mess of mixed fonts and sizes… and no matter how often I tell them to use “Paste as Plain Text”, I always end up with a new user who is frustrated and starts off with a bad impression of my product.

So… I want to implement a bit of JS which will ensure that all the formatting is automatically removed when they paste into these fields, whether they use “Paste” or “Paste as Plain Text”.

Google shows a few different solutions available… before I go and experiment with them, I wanted to know if anyone has played with this already and come up with a solution which works across all browsers!

#2

Summernote is pretty bad at removing formatting. You can use the available cleaner addon for it:

I remember i tested it some times ago, it’s better than nothing but also had some issues. You can try to see if it works for you.

My advice is to avoid allowing users to style the text you are going to show on the front end, instead provide them with text areas and style it using CSS.

#3

We’ve been using that Summernote cleaner for years, its terrible but about the only solution we’ve found. I’m sure I read in Wappler in the road map somewhere that a new text editor was going to be supported - hopefully that will be a bit better than Summernote.

This is the best idea so far yet still not ideal.

I recommend my users to paste into a notepad document then copy/paste that into Summernote then do basic formatting (bullet lists etc), they complain that ‘LinkedIn and Facebook don’t have this problem’… Frustrating, and not a good impression.

1 Like
#4

From the roadmap:

  • Add TinyMCE as App Component [Q3, 22, 70% complete]

Perhaps development on this was postponed, but it was obviously well on the way and is hopefully not forgotten.

2 Likes
#5

I’ve had in mind to play with a piece of JS to just turn “Paste with formatting” into “Paste without formatting”…

#6

@TMR, I’m curious about what the problems are… :thinking:

#7

Yes, I get that idea, but I’m trying to give them the tools to create something powerful and easy to use. Here is the kind of thing I want them to be able to easily create in Summernote (the Description part of this link):

1 Like
#8

It doesn’t make a good job of cleaning anything, we still end up with a lot of spurious random code which affects the end result.

1 Like