Summernote-cleaner integration?

Wappler General How To
#1

Hello,

has anybody managed to integrate summernote-cleaner (https://github.com/DiemenDesign/summernote-cleaner) with wappler’s summernote ?
I’ve been working with a server side custom-module to clean code but I’d really need a solution that works when the clipboard is pasted on a summernote field.

Thanks for the help, I’m a little bit under pressure.

Nathaniel

Clear text formatting when pasting in summernote
#2

Yes, you can easily add it to your page.

First include the js file in the <head> tags:

<script src="js/summernote-cleaner.js"></script>

Then add this script block:

    <script>
        dmx.global.set('editorConfig',{
    		cleaner: {
              action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
              newline: ' ', // Summernote's default is to use '<p><br></p>'
              notStyle: 'position:absolute;top:0;left:0;right:0', // Position of Notification
              icon: '<i class="note-icon">[Your Button]</i>',
              keepHtml: true, // Remove all Html formats
              keepOnlyTags: ['<p>', '<br>', '<ul>','<ol>', '<li>', '<a>'], // If keepHtml is true, remove all tags except these
              keepClasses: false, // Remove Classes
              badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
              badAttributes: ['style', 'start', 'dir', 'class'], // Remove attributes from remaining tags
              limitChars: false, // 0/false|# 0/false disables option
              limitDisplay: 'both', // text|html|both
              limitStop: false // true/false
            }
        });
    </script>

adjust the settings as per your requirements, i just copied it from my tests.

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

Thanks @Teodor,

That worked perfectly indeed. Summernote-cleaner doesn’t seem to clean the junk from more recent versions of word, though, I’ll see what I can tweek there.

Thanks for the quick help.

#4

The cleaner addon has quite a few long-standing bugs actually. I don’t think it’s maintained on github, or at least not that well.

#5

That’s a pity. Is there any other client-side summernote cleaner that anyone has a better opinion of?

#6

Haven’t found any other.
That’s always been a big problem when using an HTML editor like summernote - users love to paste some word-preformatted text in there :slight_smile: Which of course is not a great idea.

#7

It’s interesting how something so trivial has become an enterprise problem for this app/use-case in question.

2 Likes
#8

Hi @Teodor,
Does dmx.global.set config still work? I tried it and it doesn’t seem to apply when the Summernote is initiated and I can’t see anywhere relating to editorConfig in the summernote JS code.

#9

Yes, nothing has changed.

#10

So how does the Summernote integration pick it up?

#11

I am not really sure i understand your question.
Here it’s everything you need to learn how to use the addon:

#12

From what I can tell, the cleaner config is being added to a global value. How does that get used when the Summernote is initiated?

#13

By doing this you’re changing the editor config. There’s nothing more to do.