Preventing Pasting of Images in CKEditor

In the process of developing our XPages ‘Webmail’ interface, we discovered that many recipients were unable to view embedded images in the emails.

After investigating, it was caused by the images being embedded using Data URIs. Support for Data URI Images is not universal, and because it is supported in IBM Notes, everything looked like it was working ok, but a quick test viewing an email in Gmail confirmed a problem when images could not be seen.

What is a Data URI?

You are most likely familar with an image being specified by a URL to Resource, in this cause all the binary data for the image is requested from some location

With a data URI, all the binary data for the image is contained directly in the src=”” attribute, and does not need to be requested from anywhere, here is an example I lifted from wikipedia:

When sending emails however, it is a much better idea to embed the image as a separate mime entity, and refer to it using a ‘Content Identifier’ (cid).

The image data is then retrieved from the related mime entity which specifies that Content-ID as a MimeHeader

Sending Embedded Images in Emails

The best format for sending emails is the ‘content-id’ method, and the Xpages CKEditor provides a toolbar button which will perform the image upload and attach asĀ  separate mime entity.

On the other hand, an easy way for users to insert images is to use some screen capture software such as Snipping Tool and then copy and paste into the CKEditor. When this method is used, the image is inserted as a Data URI.

By default, some browsers don’t support the pasting of images anyway, but Firefox and probably some others do, and it must be stopped!

Preventing Pasting of Images using a CKEditor plugin

After a bit of googling I found that someone else had already come up with a plugin which prevents pasted images, and it worked without modification for XPages

I will repost the plugin here, the only modification I have made is the alert message to explain to the User to use the image upload toolbar button

To use the plugin, copy the above code into a Client Side JavaScript Library ‘blockimagepaste’.

preventpastescriptlib

 

Then, make sure to include the ScriptLibrary as a resource on your page. Also add the dojoAttribute ‘extraPlugins’ with the name of the plugin (from line 1 above ‘blockimagepaste’.

So now when a user attempts to paste an image it will not be completed, and they will be given the alert

preventpastealert

Summary and Next Steps

So in this post we added a CKEditor plugin to our application, and configured our InputRichText to use it.

The plugin prevents the pasting of data URI images, however you could modify this to prevent any html you like, in a future post we will show a modified version of this plugin to prevent images pasted using URLs. This can be troublesome for emails, as users may copy and paste html from internal applications, which is then not available to external email recipients.

Also, copying and pasting images is actually quite a useful feature don’t you think? our users did too, so we also implemented another plugin which intercepts the pasted image, and uploads it using the normal ‘Content-ID’ method instead, I will share that solution as well in a future post.

 

You may also like...

2 Responses

  1. November 14, 2016

    […] Preventing pasting of Data URI images […]

  2. November 15, 2016

    […] the previous post, I showed how to prevent a user from pasting Images from the Clipboard into CKEditor. This post is of a similar nature but is designed to ensure that users don’t paste images […]

Leave a Reply

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