Copy paste formatting from web to TinyMCE

Question

I am working in TINYMce. I begin with TinyMCE having a template of three bullet points. I want to highlight some text from the web and paste it into the existing bullet points in tinymce.

When I copy content from the web, then highlight the three bullets in Tinymce, and paste,I get this:

Does anyone have a solution for this using any of the init configurations? This is making me want to use a different tool than TinyMce just because of this issue.

EDIT: After some digging, I came up with a solution. What was happening was on paste there were added

tags, which created the spaces between bullets 2-3 and 3-4. Here is what worked for me:

tinymce.init({  
paste_preprocess: function(plugin, args) {
        var regex = /<\/?p[^>]*>/g;
        var rawcontent = args.content
        var replacedcontent = rawcontent.replace(regex, "");
        args.content = replacedcontent;
        console.log(replacedcontent);
  },

This is still not perfect because on paste, Tinymce adds a 4th bullet point. I'm not sure how to sovle this, but marking this complete for now.

The question really boils down to what HTML you have in TinyMCE first and then when you copy the content "from the web" and paste it what HTML you have in the clipboard for TinyMCE to process. There are a variety of tools that will show you what is in the clipboard depending on what OS you are using but I suspect what is happening is that you are inserting an HTML list into another HTML list. If the list you are inserting has any inline styles that would impact its layout but (potentially) not the surrounding list elements. — Michael Fromin
@MichaelFromin Okay, thanks for pointing me in the right direction. If I can remove &nbsp when I paste the content to Tinymce, than I will be in business. Do you know if there is a setting in init to do this? I think I've tried everything and cannot figure it out. — Jordan Starrk
There are a few reasons why TinyMCE inserts   - specifically if you have multiple spaces in a row it uses hard spaces to keep that spacing in tact as multiple regular spaces are not maintained in HTML. There is no setting to stop using   when multiple spaces are in content. If you are seeing hard spaces used when they are not needed that would be a different issue. — Michael Fromin
Thanks. I found a solution. What was happening was extra <p> </p> tags were being added on paste. To fix this I added code for a paste_preprocess function so that it will remove paragraph tags from the clipboard before pasting. It is now nearly to my satisfaction. The one thing that is still driving me mad is when I paste my web content to Tinymce as described above, it is adding a 4th empty bullet on paste. Do you know is this is solved with an init setting? — Jordan Starrk

Jordan Starrk Jordan Starrk · Accepted Answer · 2020-10-27T13:43:03

After some digging, I came up with a solution. What was happening was on paste there were added tags, which created the spaces between bullets 2-3 and 3-4. Here is what worked for me:

tinymce.init({  
paste_preprocess: function(plugin, args) {
        var regex = /<\/?p[^>]*>/g;
        var rawcontent = args.content
        var replacedcontent = rawcontent.replace(regex, "");
        args.content = replacedcontent;
        console.log(replacedcontent);
  },

This is still not perfect because on paste, Tinymce adds a 4th bullet point. I'm not sure how to solve that piece.

Copy paste formatting from web to TinyMCE

1 Answers