5

Is there a way to copy styled HTML and get the associated format that Chrome sees? For example, if I copy the title of this question, I paste it into the text editor that my newsletter provider (MailChimp) gives me, and I switch to HTML mode, I can see that what actually gets copied is:

<h1 itemprop="name" style="margin: 0px 0px 7px; padding: 0px; border: 0px; font-size: 23.3333339691162px; vertical-align: baseline; font-family: 'Trebuchet MS', 'Liberation Sans', 'DejaVu Sans', sans-serif; line-height: 1.3; background: rgb(255, 255, 255);">
    <a href="http://stackoverflow.com/questions/24907135/error-cannot-read-property-of-undefined" class="question-hyperlink" style="margin: 0px; padding: 0px; border: 0px; font-size: 23.3333339691162px; vertical-align: baseline; color: rgb(0, 0, 0); text-decoration: none; cursor: pointer; background: transparent;">
        How to see the hidden formats that get copied when copying HTML content?
    </a>
</h1>

Is there an easy way to extract this information using a dedicated tool (not my newsletter provider)?

EDIT: Just to make it clear, if I inspect the title header and I click on Copy, I get the HTML without the embedded CSS:

<h1 itemprop="name">
    <a href="/questions/24907376/how-to-see-the-hidden-formats-that-get-copied-when-copying-html-content" class="question-hyperlink">How to see the hidden formats that get copied when  copying HTML content?
    </a>
</h1>
nachocab
  • 13,328
  • 21
  • 91
  • 149

5 Answers5

7

What you are trying to do is export standalone HTML. Your question is not entirely clear, but I'm assuming you're trying to retrieve it from a page under your control, and you can thus run Javascript.

This means that, at runtime, you need to determine the effective 'computed' styles for every element, and apply them to the element itself. After that you can simply read and process the innerHTML of the containing element to retrieve your standalone content.

Read the excellent answers on this question to see how to retrieve the runtime calculated style of every element. Then apply each of them explicitly to the element itself through its style property. The innerHTML property will reflect these changes in the returned value.

If the webpage you're trying to do this on is not under your control, you could always inject the same code using for example GreaseMonkey for Firefox or TamperMonkey for Chrome. This would make it enough of a 'universal tool'.

Community
  • 1
  • 1
Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • Is there a way to do this without javascript? My newsletter provider lets me copy HTML from any location and paste it, automatically adding the correct computed styles (as I specified above). – nachocab Sep 13 '14 at 18:01
  • *Something* needs to copy the computed style to the inline styles for the export to work. The most probable candidate for that is Javascript. Your question is however highly unclear on what you mean with 'a dedicated tool' and what problem you are exactly trying to solve (you are asking about a predefined solution). – Niels Keurentjes Sep 14 '14 at 13:04
  • My fault for not being clear, I guess what I meant was "is there some place where I can paste a piece of html and get the inline styles?" or do I have to build it myself? (that's a valid answer) – nachocab Sep 14 '14 at 15:12
  • Well in that case this is the answer: no, the browser does not put them on the clipboard by default, unless some sort of browser-local code enforces it there :) – Niels Keurentjes Sep 14 '14 at 15:39
1

If you want to copy the HTML and CSS you can go to the HTML panel, copy the HTML via "Copy HTML", then switch to the CSS panel, enable the Source Edit Mode, select all and copy it from there.

If you need to extract all the CSS associated with an element I would recommend using the Chrome Extention SnappySnippet.

Varun
  • 870
  • 2
  • 10
  • 27
  • SnappySnippet seems interesting, but it doesn't embed the styles in the HTML. Embedded styles are required when sending HTML email. – nachocab Sep 13 '14 at 17:59
0

Some of the current browsers support a clipboardData property as part of a paste event. This should allow you to query the different data formats created from the current data on the clipboard. Safari and Chrome have the best support, but it is still incomplete. Firefox has no support if you discount using the XPCOM objects interface. The IE interface is older and only supports Text or URL data.

Using clipboardData property

Hamix
  • 1,323
  • 7
  • 18
0

u can download the entire page,site, html/css/js or desired html code using software called httrack

Ankit Agrawal
  • 2,426
  • 1
  • 13
  • 27
-1

Judging by your question you need a tool that provides a certain functionality, much like ckeditor.

Here you can test a demo of it and see if it fits your needs. You can paste the text and click on source to view the styles.

It is pretty much a plug in that you can put in any page and perform this action on your page. I used it to switch some type writer related work to the administrative department, since allowed them to copy entire detailed and structured description. It also permits to copy an entire page and paste it into the text box, then store it somewhere and use it somewhere else.

CMS wise it's a good editor. SEO wise, not so much, since it copies styles as inline css.

Disclaimer: I didn't make it, but I consider it useful. Also I never found something that mimics it's functions.

Hristo Valkanov
  • 1,689
  • 22
  • 33