Copy-paste website content WITH formatting & images

It would be great if selecting and copy-pasting content from a page into another application (e.g. Outlook email) preserved the formatting from the source, including fonts, font size, colours, hyperlinks, images, etc.

Firefox and Chrome both do this. I find myself mailing content to others in my office a lot (since they are too lazy to click through links), and I often have to load a URL in another browser for copy-pasting so that I save myself the time required to reformat.

Thanks

+1

Glad to see I'm not the only one Pasting your blog post below:

http://my.opera.com/burnout426/blog/2011/09/16/standard-features-missing-in-opera-copying-rich-text

"Today's standard feature that Opera is missing is copying rich text in a selection on a web page to the clipboard.

This is useful for selecting content on a web page, copying it and pasting it into MS Office, OpenOffice, rich text editors on web pages, mail clients that support composing in HTML and other programs that support rich text.

This works fine in IE, Chrome, Safari and Firefox.

Opera doesn't support this at all for regular web pages. Opera does support this partially if you turn an entire web page into a rich text editor by setting document.designMode to "on". But, that's not even close to the same as what other browsers support.

This is probably one of the most popular feature requests for Opera. Other browsers have had this forever. But, Opera remains broken in this area.

Some Opera users are against this though because they only want to copy and paste plain text. Well, the way it works in other browsers is that both a plain text version and an HTML version is copied to the clipboard. Then, which version gets pasted depends on what you're pasting into. If what you're pasting into supports rich text, the HTML version gets inserted. If you paste into a plain text editor, the plain text version obviously gets inserted. Further, programs that support rich text often give you a special paste option to paste the text version just in case you don't want the HTML version inserted.

Even with that in mind, some Opera users might want to paste into a rich text editor that doesn't have a special text only paste option. Or, they just don't want markup leaking into the clipboard for whatever reason. In these edge-cases, Opera could have an option to disable copying of rich text, if that's really necessary. But, other browsers and their users seem to do fine without that.

This is something that is not only a standard feature, but a required feature for a web browser."

I see there is a similar thread here: http://my.opera.com/community/forums/topic.dml?id=1257

+1 for the feature request. This is very handy feature.

yes it would help me alot, +1

+1, though this topic is a duplicate of this really old topic.

Does anybody know how this is supposed to work? When I select formatted text from a webpage, the underlying HTML code does in most cases contain no styling information. Styles are mostly defined in external stylesheets and/or inherited from previous page sections, so what kind of code would the browser send to the clipboard so that a target application can reproduce the formatted text? Provided that the clipboard cannot "see" the screen output, how would the clipboard get all the information from the various stylesheets and the browser's rendering concept that are just not in the copied piece of data? I would gladly support this feature request - if it works.

To see what I am missing I checked the feature with Chrome and Firefox.
I tried it with the page http://my.opera.com/chooseopera/blog/ (in case the page has changed, here a screenshot)
I pasted some text portion to Abiword, and frankly I'm not impressed with the result. Firefox couldn't even keep the headline in uppercase:


Things work better when the HTML code contains style information like this

<p align="center"><b><font face="Comic Sans MS" size="6" color="#FF00FF">Sample text</font></b></p>

But such outdated markup can (hopefully!) only be found in amateur homepages, so I think the ability of Opera to copy formatted text would have a very limited value.

Select and copy in Firefox. Then, use clipview to view what's on the clipboard. You'll see an rtf/html section and a text section for the text/plain alternative.

You can select cells in Calc or Excel and copy them to the clipboard to see what they generate too.

Originally posted by burnout426:

You'll see an rtf/html section and a text section for the text/plain alternative.

Thanks. What I can see is that the HTML code in the clipboard has little to do with the style of the copied text...no surprise.

See what chrome does though. It often includes css info via style attributes.

+1

I use Chrome or Firefox sometime because Opera hasn't such feature.

/\ the same with me, ah-jong

+1
at the user level, Opera corrupts the data copied by the user, by stripping out the formatting and pictures. Most users are non techy. And don't care for any technical reasons why Opera modifies their data. Wysiwyg has been around only 20 years.

As a good workaround install the Edit the Page extension.
Switch on edit, make the copy and paste, then switch off edit. Formatting, links and pictures are successfully pasted.

ianp5a,

thanks, it's a good workaround.

+1

i thought i would bring some attention to this again

pls help me opera...let me do copy and paste a whole web page with all its content ..... chrome firefox and even maxthon is helpful to do that. opera u are my default browser. pls do something for that.

pls help me to copy and paste a whole webpage using opera...... i expect it in the next updation pls help me opera...pls pls..pls..

^^ Select the parts of the page (or if you need the really complete page, press Ctrl + A), and drag it to the application. (perform a drag and drop from Opera to application - works fine, tested with word processors). Opera 12.00 and above.

It did not work for me.

When I did the dragging operation, only the link to this page shown int the MS word.
Maybe I did not do it in the correct way.

Originally posted by Swapnil99pro:

^^ Select the parts of the page (or if you need the really complete page, press Ctrl + A), and drag it to the application. (perform a drag and drop from Opera to application - works fine, tested with word processors). Opera 12.00 and above.

Originally posted by hsuankwok:

It did not work for me.

Broken since Opera 12.01.

Originally posted by Swapnil99pro:

Broken since Opera 12.01.

Damn regressions.

Copy paste of richt text has always failed on Opera for me. Only if I use the "Edit" extension it works.

If it already works with an extension, it cant be too difficult for the developers to add. It's just a question of priorities. A bit like rich text email in Opera. Critical for the majority of users, but not interesting to techies. They should not be allowed to set the priorities. But maybe Opera developers are really well overloaded. Maybe when HTML5 is finished.

+1, but please also add ctrl-shift-c or something for plain-text copy (as some programs don't allow for removing the formatting when pasting)

Now when i 'discovered' MS Onenote this feature is a must. I can't live without Onenote and I really don't want to switch to firefox or even use it to copy pages content.
I usually don't write on forums but this time i just had to. Maybe when more people will ask for copying text with formatting and images opera developers decide to implement it and if they will i'm sure it will work better then in other browsers

One of the most wanted features it's in my case too.

I rely on Opera, but too many candies are to the other stores.

I was thinking that i'm alone with this until i found this topic

+1

Victory!

1. Ctrl + F12 > Advanced > Toolbars > Menu setup > chose "Opera Standard" and make a copy.
2. Close Opera.
3. Run (Win+R) or open in any editor: %APPDATA%\Opera\Opera\menu\standard_menu (1).ini
4. Search for "[Hotclick Popup Menu]" (without quotes)
5. Below Item, M_COPY_TO_NOTE=Copy to note add:
   Item, "Copy with formatting"=Go to page, "javascript:function sS() {var s = window.getSelection();if (s.getRangeAt && s.rangeCount) {return s.getRangeAt(0);}return null;}function rS(range) {if (range) {var s = window.getSelection();s.removeAllRanges();s.addRange(range);}}",,"Copying with formatting" & Go to page, "javascript:void(tmp=sS());void(document.designMode='on')" & Delay, 300 & Go to page, "javascript:void(rS(tmp))" & Delay, 300 & Copy & Delay, 300 & Go to page, "javascript:void(document.designMode='off')"
6. Start Opera.

Select text and from context menu choose "Copy with formatting". The selection will flicker and it's done - you've copied the HTML :-).

BTW there is hope - Opera 12.50 should support Clipboard API and maybe HTML copying will be a bit less hacky ;-).

Originally posted by EcceNux:

Victory!

I'm attempting to make your suggested menu item into a button, but I'm having trouble setting a title and custom icon. Do you have the equivalent code as a button with title and icon?

From a few tests the code works well only for most basic text formatting (bold, italic, headlines, lists, etc), copying of Unicode characters and raw images and preservation of original font used doesn't appear to be supported.

Thanks.

Originally posted by laurenbacall:

Originally posted by EcceNux:

Victory!

I'm attempting to make your suggested menu item into a button, but I'm having trouble setting a title and custom icon. Do you have the equivalent code as a button with title and icon?

Edit: Ignore all below the link for adding a button is this: Copy HTML

Go to: http://home.wanadoo.nl/sipke.reina/opera/buttons.html

And at step 3 (bottom of the page) pase this code:

Go to page, "javascript:function sS() {var s = window.getSelection();if (s.getRangeAt && s.rangeCount) {return s.getRangeAt(0);}return null;}function rS(range) {if (range) {var s = window.getSelection();s.removeAllRanges();s.addRange(range);}}", , "Copy HTML", "Select Author Mode" & Go to page, "javascript:void(tmp=sS());void(document.designMode='on')" & Delay, 300 & Go to page, "javascript:void(rS(tmp))" & Delay, 300 & Copy & Delay, 300 & Go to page, "javascript:void(document.designMode='off')"

Click "Create Button" and click on the icon that will appear. The rest works as with all link-buttons.

Oh, and yes, fonts are not supported, but that's probably because you don't select style sheet of the page when you select a page fragment. It would probably work if a style tag would be inside selection (haven't tried though).

Edit: I just noticed it is allowed to paste button links on this forum... Here it is: Copy HTML

Thanks for your help. I was actually using the same button creator, but couldn't get the icon to display correctly, and indeed pasting in your code gave me the same result. However using your button link at the end of your post did display the icon, but doesn't perform the action.



I did notice that upon clicking the 'Go to page' text on the button it briefly changes to display the correct icon, so perhaps only the syntax of the button needs some fix. As I'm writing this I notice a strange bug with the icon (the copypasta one), when the text caret is inside an input box and you press Shift+left arrow / Shift+right arrow the icon toggles on/off .

I'm not too concerned, Opera will hopefully add this ability natively soon with font, image, etc support like other browers.

Originally posted by EcceNux:

Victory!

1. Ctrl + F12 > Advanced > Toolbars > Menu setup > chose "Opera Standard" and make a copy.
2. Close Opera.
3. Run (Win+R) or open in any editor: %APPDATA%\Opera\Opera\menu\standard_menu (1).ini
4. Search for "[Hotclick Popup Menu]" (without quotes)
5. Below Item, M_COPY_TO_NOTE=Copy to note add:
   Item, "Copy with formatting"=Go to page, "javascript:function sS() {var s = window.getSelection();if (s.getRangeAt && s.rangeCount) {return s.getRangeAt(0);}return null;}function rS(range) {if (range) {var s = window.getSelection();s.removeAllRanges();s.addRange(range);}}",,"Copying with formatting" & Go to page, "javascript:void(tmp=sS());void(document.designMode='on')" & Delay, 300 & Go to page, "javascript:void(rS(tmp))" & Delay, 300 & Copy & Delay, 300 & Go to page, "javascript:void(document.designMode='off')"
6. Start Opera.

Select text and from context menu choose "Copy with formatting". The selection will flicker and it's done - you've copied the HTML :-).

BTW there is hope - Opera 12.50 should support Clipboard API and maybe HTML copying will be a bit less hacky ;-).

@EcceNux


you are a genius!!! i works on my Opera 12.12... i m hoping for this option by default for 3000 yrs. on Opera ... IE, Chrome and FF have this option for ages... i missed it for long... let's hope this option comes to v12.50 by default


thanks,
samystic

Originally posted by laurenbacall:

Thanks for your help. I was actually using the same button creator, but couldn't get the icon to display correctly, and indeed pasting in your code gave me the same result. However using your button link at the end of your post did display the icon, but doesn't perform the action.

Fixed that now. The forum was truncating the link rather randomly. Pre-encoded it and it seems fine now.

Originally posted by laurenbacall:

I did notice that upon clicking the 'Go to page' text on the button it briefly changes to display the correct icon, so perhaps only the syntax of the button needs some fix. As I'm writing this I notice a strange bug with the icon (the copypasta one), when the text caret is inside an input box and you press Shift+left arrow / Shift+right arrow the icon toggles on/off .

That happens for me too but it used to work fine... Strange. It might be because the line is much longer then expected ;-).

OK. Another version. The algorithms in the toolbar/menu are just bizarre...
Copy HTML button

You need to restart Opera after adding the button. It should then activate itself when something is selected.

29 March 2013, Opera 12.13. This worked for me:

How to copy HTML by selecting elements on a web page and clicking the right mouse button.

N.B. You need to enable HTML formatting.

Step 1. Duplicate the menu:

Settings > Preferences > Advanced > Toolbars > Menu Setup > "Opera Standard" --> Duplicate

You will find the duplicated menu setup here: c:\users\username\AppData\Roaming\Opera\Opera\menu

The files name usually is "standard menu (1).ini".

Step 2. Add a menu item:

Edit the menu(1).ini file.

Got to:

[Hotclick Popup Menu]

Copy the lines below:

--------------------
Item, "Copy with formating"=Go to page, "javascript:function sS() {var s = window.getSelection();if (s.getRangeAt && s.rangeCount) {return s.getRangeAt(0);}return null;}function rS(range) {if (range) {var s = window.getSelection();s.removeAllRanges();s.addRange(range);}}",,"Copying with formatting" & Go to page, "javascript:void(tmp=sS());void(document.designMode='on')" & Delay, 300 & Go to page, "javascript:void(rS(tmp))" & Delay, 300 & Copy & Delay, 300 & Go to page, "javascript:void(document.designMode='off')""

Well, both the hotclick menu and the button seem to work for me. The button doesn't always activate promptly, but it does work. As noted, fonts are not copied. Links are generally copied accurately. However, for some reason the beginning of a Wikipedia link is always truncated: http://en.wikipedia.org/wiki/Jan_van_Eyck is copied as /wiki/Jan_van_Eyck, which, of course, will not open. Pasting into MS Word is extremely slow, but does eventually work. Thanks for your labor in putting this together, EcceNux!

The Edit the Page extension also allows copying formats for me, with similar limitations: no fonts, and front-truncated Wikipedia links.

But on the off chance that any Opera developers see this: user-created workarounds, even though they work well, are not a satisfactory replacement for the programmers' fulfilling this longstanding and widely supported request!

thanks guys I was finally able to copy formatted html with Opera 12.12

Just when I thought that I could make the move to the Opera browser because the developers added URL drag & drop, now I discover that it's not possible to copy HTML.

Please, consider this implementation seriously. It is essential! At least, clean HTML.

Thanks

@Diegoz

the standard menu can be easily tweaked to allow copy html
see posts above

+1

was hoping too much following this thread for 2 years now, ersatz doesn't work the way expected, button whimsical format approximated, opera! make it standard to bin chrome end schism please. will use it anyway its a gift