Clipboard.js: don't find the css style when copy html

[garyyan]

When I copy the html,it only have the text,but don't find any css style。how to get the css style?thanks!

[cyberaleks]

If you want to copy an html element with css style, you should define css in "style" attribute of html element.

[garyyan]

@cyberaleks
thank you for your answer.
I do a test used chrome 62.0.3202.94,and test the element like this:
<p style="color:red">test the clipboard</p>
but still find the e.text is:"test the clipboard"
but not:<p style="color:red">test the clipboard</p>.
would you like to give me a example?
thanks

[cyberaleks]

Did you tried this? This works fine for me.

new Clipboard('.btn',{
        text: function(trigger) {
            return trigger.outerHTML;
        }
    });

[garyyan]

@cyberaleks
Thank you for your demo,it is work fine for me too.
but it seems only set the outerHTML to clipboardData with the type"text/plain",
if I want to set the outerHTML to clipboardData with the type"text/html",how to do it?
as I want to copy it to the Rich editor,which should been show as the html element in the Rich editor.
thank you very much.

[cyberaleks]

This should work.

//Setup Clipboard lib
    new Clipboard('.btn',{
        text: function(trigger) {
            return trigger.outerHTML;
        }
    });
    // Overwrite what is being copied to the clipboard.
    document.addEventListener('copy', function(e) {
        e.clipboardData.setData('text/html', e.target.value);
        e.preventDefault();
    });

You should add a target check because copy event will be applied to all elements/actions.

[garyyan]

@cyberaleks
It work fine now.
just a suggestion ,it will be better if support the html,as below:

new Clipboard('.btn',{

 html: function(trigger) {
            return my.outerHTML;
        } ,      

text: function(trigger) {
            return my.outerText;
        }
    });

and I have another question for the

new Clipboard('.btn',{
        text: function(trigger) {
            return trigger.outerHTML;
        }
    });

I study the source code,and find it used the selectFake() to update the clipboard text indirectly,why not use the

e.clipboardData.setData('text/plain', e.target.value);

directly?
it have some special reason ?
as I use the e.clipboardData.setData() now,if have any problem,I have to avoid it.

Thanks

[cyberaleks]

+1 I asked myself too, why not support html. My suggestion above is only a quick fix.

[zenorocha]

Closing due to inactivity.