Pasting Images into XPages CKEditor

Programs like ‘Snipping Tool’ on Windows, are super useful for users to make a quick snapshot, do some quick markup on the image, paste into chat/email and send.

Unfortunately when using the default configuration of CKEditor in XPages (the inputRichText control), support for pasting images is not available for all browsers, and even for the ones that do support it, the images are only pasted as a PNG data URI. I have explained data URI images in a previous post, so check that out if you are unfamiliar with it.

This also means the pasted images will not display properly in Some versions of IBM Notes client, and also if you are using the content of the inputRichText for sending email content, the pasted images will also not display in the majority of webmail / email clients. This will result in a lot of replies from recipients along the lines of “I can’t see any images’.

My major project recently has been a webmail interface for XPages, and accordingly I needed to solve this problem to make the users happy!

From first solution to Current solution

The solution to this problem, was to intercept the image paste event and instead of creating the data URI image, it uploads the image via the same mechanism that is used for the standard ‘image button’ on the CKEditor toolbar. This involves posting the image data to a URL and interpreting the ‘success’ response, and then inserting the corresponding ‘<img>’ tag into the editor content.

The first solution I came up was a modification of the free imagepaste CKEditor plugin by Alfonso Martinez de Lizarrondo. Unfortunately this solution only worked for Firefox. So it was a good start but not completely useful because some users preferred to use Chrome.

Alfonso had also released a paid plugin called SimpleUploads, which included support for other browsers such as Chrome and Internet Explorer. So I purchased this plugin and ripped the parts out of it that were needed to support chrome and internet explorer, and modified my existing solution.

This was great for me! Now my users could paste from Firefox, Chrome and Internet Explorer. However I could not share this solution on my blog because it included source code from the plugin that I purchased. The plugin is not licensed as Open Source, so this would not be within my rights to do so.

So when a stackoverflow user had the same problem,  I decided to amend the solution so that I could share it whilst respecting the licensing conditions of the original plugin author.

Alfonso had actually already included some callback functions which allowed customisation of the simpleuploads plugin. It turns out I could actually reconfigure my solution to be an ‘extension’ of the simpleuploads plugin.

I modified the solution to use the callbacks and it was almost perfect, but I just needed Alfonso to make 1 minor change to the SimpleUploads plugin. He agreed to make the change and his latest version of SimpleUploads includes the modification to allow my solution to work.

The Solution

Obtain SimpleUploads

So as mentioned above, you will need to purchase the SimpleUploads plugin and make sure you have the latest version or at least verson 4.4.4

It starts at 10 Euros for a single site licence.

  • If you are a new customer you will automatically receive the latest version.
  • If you had previously bought SimpleUploads you may need to request the latest version from Alfonso. Alfonso has not pushed the new version out to his customer mailing list yet as the change is not significant for other users.

Install SimpleUploads

Once you have obtained the simple uploads plugin, put it in your WEB-INF directory of the NSF

Create a new Javascript library in your nsf

This library will configure CKEditor to know the whereabouts of simpleuploads plugin, and also include the necessary extensions to simpleuploads to allow it to work with XPages.

I have called it ‘xspSimpleUploads’

Here are the contents of the library:

Configure your XPage and Ckeditor

You must include the Script Library on your xpage, and you must tell your CKeditor to use simpleuploads via the extraPlugins dojoAttribute

Here is an example page that I am using with the key points highlighted.

Result:

Your users should be able to paste images with no worries!

As usual, I am sure I haven’t thought of everything so if you have any problems with the above, then please let me know!

Demonstration

As requested by Timothy Briley, here is a demonstration video which demonstrates the problem and shows the steps to implement the solution.

You may also like...

5 Responses

  1. Timothy Briley says:

    Cameron,

    Any chance you could put up a demo on Youtube?

Leave a Reply

Your email address will not be published. Required fields are marked *