Copy/paste content into email or word doesn't include images

Either I am missing very obvious thing or if it is a bug.
I am just trying to copy and paste the wiki page content into either outlook email or MS word. It only contains text on the page. Images are not copied over.
I also tried “Share by Email” and Email didn’t include images as well. I tried copying page while in the edit mode with no avail as well.
Can someone please tell me if I am missing something here? This is really a needed feature.

Only thing currently works is: Export to ODT. This also includes very tiny image that I have to adjust the size of in a word document. This is really an inconvenience to a user who doesn’t know much to find work arounds to an issue.

Thanks a lot

That’s expected. If you copy the content then there is no image there, only reference to it. If you copy the rendered HTML, you may also only get the reference, depending on your mail client too (some could embed the image, others will just copy the reference). This is not specific to XWiki though. Would be the same for any HTML content from any site.

Note: If your wiki is private this is why you don’t see the images (the image requires authentication from the server to send it). What you want is to embed the image.

There is a known issue for this: Loading...

And export to PDF also works. Same for the HTML export. Export to LaTeX also includes the images in the export.


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);
  document.addEventListener("copy", listener);
  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.


Hey, cool! Didn’t try it yet, but sounds interesting as approach.