Hi there @Andy,
your question might not be relevant to you anymore, but since I stumbled upon your post because I had the same issue, I thought I’d just leave my solution (or rather approach) here, in case it might help anyone else.
My idea was to use Javascript to temporarily modify the whole content of an XWiki page (as represented by the <div id="xwikicontent">), i.e.
- remove all the inline “Edit Section” Buttons (because)
- resolve all relative links to absolute URLs (because relative links, e.g. to other pages, won’t work in e-mails…)
- convert all image sources (
<img src="">) to Base64-encoded representations of the image itself and use those as a data:-URI.
and then copy the modified content as “rich text” to the clipboard. Pasting (with images) worked fine for me in LibreOffce, MS Office and web-based editors that support pasting images from clipboard.
/* get a HTMLCollection of all images in the Content Area */
var images = document.getElementById('xwikicontent').getElementsByTagName('img');
/* make a backup of the content o:-) to restore it later */
var content_orig = document.getElementById('xwikicontent').innerHTML;
/* walk backwards through all links that have class="edit_section" and remove them from the content */
while (document.getElementsByClassName("edit_section").length > 0) {
document.getElementsByClassName("edit_section")[document.getElementsByClassName("edit_section").length - 1].remove();
}
/* looks nonsensical, but resolves relative paths to absolute URLs for all links within #xwikicontent */
for (lnk of document.getElementById('xwikicontent').getElementsByTagName("a")) {
lnk.href = lnk.href;
}
/* for all the images ...*/
for (var i = 0; i < images.length; i++) {
var canvas = document.createElement('canvas'); /* create an empty canvas */
var context = canvas.getContext('2d'); /* make it 2D */
canvas.width = images[i].width; /* resize the canvas to the dimensions of the image*/
canvas.height = images[i].height;
context.drawImage(images[i], 0, 0); /* draw this image on the canvas*/
var dataURL = canvas.toDataURL('image/png'); /* convert the image data to an embedded data:-URI*/
images[i].src = dataURL; /* replace the original image source with the data:-URI */
}
/* Now put the modified content into the Clipboard both as HTML and Text-only */
var content = document.getElementById('xwikicontent').innerHTML;
function listener(e) {
e.clipboardData.setData("text/html", content);
e.clipboardData.setData("text/plain", content);
e.preventDefault();
}
document.addEventListener("copy", listener);
document.execCommand("copy");
document.removeEventListener("copy", listener);
/* Restore the original content */
document.getElementById('xwikicontent').innerHTML = content_orig;
It’s my first try, very rough around the edges and might cause nausea. Or fire. Or both. Beware.
Especially the execCommand-bit is deprecated and will break sooner than later.
Here’s the code for you to copy&paste to try it out as a bookmarklet.
javascript:(function(){var images = document.getElementById('xwikicontent').getElementsByTagName('img');var content_orig = document.getElementById('xwikicontent').innerHTML;while (document.getElementsByClassName("edit_section").length > 0) {document.getElementsByClassName("edit_section")[document.getElementsByClassName("edit_section").length - 1].remove();}for (lnk of document.getElementById('xwikicontent').getElementsByTagName("a")) {lnk.href = lnk.href;}for (var i = 0; i < images.length; i++) {var canvas = document.createElement('canvas');var context = canvas.getContext('2d');canvas.width = images[i].width;canvas.height = images[i].height;context.drawImage(images[i], 0, 0);console.log("Gefunden: " + images[i].src.substring(location.origin.length));var dataURL = canvas.toDataURL('image/png');console.log("→ ersetze durch: " + dataURL.substring(0, 250));images[i].src = dataURL;}var content = document.getElementById('xwikicontent').innerHTML;function listener(e) {e.clipboardData.setData("text/html", content);e.clipboardData.setData("text/plain", content);e.preventDefault();}document.addEventListener("copy", listener);document.execCommand("copy");document.removeEventListener("copy", listener);document.getElementById('xwikicontent').innerHTML = content_orig;})();
Im still figuring out in the next days where I want to put this in form of a button on my wiki’s theme.
Regards
