198 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Embedded Experiences not rendering after IBM Notes FP9
Wed, Sep 27th 2017 4
BuildXPages Deployment Automation Tools – v1.0.0
Thu, Sep 21st 2017 4
Generating and Downloading Files Using XPages’ Persistence Service
Wed, Sep 13th 2017 8
Bundle Inspector – Diagnosing XPages Plugin Resolution problems
Wed, Aug 2nd 2017 7
Swiper Official Version 2 Release
Fri, Jul 21st 2017 1
Auto-width Bootstrap Column XPages Controls
Tue, Mar 21st 2017 2
Swiper FP8 Version Beta Release
Thu, Mar 16th 2017 6
Top 10
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 11
Build System for XPages and OSGi plugins
Fri, Aug 8th 2014 9
Email Address Validator for XPages
Wed, Feb 11th 2015 8
Review: JRebel with Domino OSGi development
Mon, Sep 5th 2016 8
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 8
Generating and Downloading Files Using XPages’ Persistence Service
Wed, Sep 13th 2017 8
Tips for Creating a Webmail UI with XPages
Tue, Apr 19th 2016 7
Webmail UI – You must learn about MIME
Wed, Apr 20th 2016 7
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 7
Bundle Inspector – Diagnosing XPages Plugin Resolution problems
Wed, Aug 2nd 2017 7


Preventing Pasting of Images in CKEditor
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
camerongregor    

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

<img src="reddot.png" alt="Red dot" />

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:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

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).

<img alt="" src=cid:reddot_1479074021464></img>

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

--==IFJRGLKFGIR32748UHRUHIHD
Content-Type: image/jpeg
Content-Disposition: inline;
	 filename="reddot_1479074021464.JPG"
Content-ID: <reddot_1479074021464>
Content-Transfer-Encoding: base64

/9j/4AAQSkZJRgABAQEAYABgAAD/4RD4RXhpZgAATU0AKgAAAAgABAE7AAIAAAAPAAAISodpAAQA
...more binary data...
iigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9k=


--==IFJRGLKFGIR32748UHRUHIHD--

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

CKEDITOR.plugins.add('blockimagepaste', {

	init : function(editor) {

		function replaceImgText(html) {

			var ret = html.replace(/<img[^>]*src="data:image/(bmp|dds|gif|jpg|jpeg|png|psd|pspimage|tga|thm|tif|tiff|yuv|ai|eps|ps|svg);base64,.*?"[^>]*>/gi, function(img) {
				alert("Pasting Image Data is not allowed. Please use the Image Upload button (if available).");
				return '';
			});

			return ret;
		}

		function chkImg() {
			// don't execute code if the editor is readOnly
			if (editor.readOnly)
				return;

			setTimeout(function() {
				editor.document.$.body.innerHTML = replaceImgText(editor.document.$.body.innerHTML);
			}, 100);
		}

		editor.on('contentDom', function() {
			// For Firefox
			editor.document.on('drop', chkImg);
			// For IE
			editor.document.getBody().on('drop', chkImg);
		});

		editor.on('paste', function(e) {

			var html = e.data.dataValue;
			if (!html) {
				return;
			}

			e.data.dataValue = replaceImgText(html);
		});

	} // Init
});

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’.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:this.data>
		<xp:dominoDocument var="document1"></xp:dominoDocument>
	</xp:this.data>

	<xp:this.resources>
		<xp:script src="/blockimagepaste.js" clientSide="true"></xp:script>
	</xp:this.resources>
	
	<xp:inputRichText id="inputRichText1" value="#{document1.body}">
		<xp:this.dojoAttributes>
			<xp:dojoAttribute name="extraPlugins" value="blockimagepaste"></xp:dojoAttribute>
		</xp:this.dojoAttributes>
	</xp:inputRichText>
	
</xp:view>

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.

 



---------------------
http://camerongregor.com/2016/11/14/preventing-pasting-of-images-in-ckeditor/
Nov 14, 2016
9 hits



Recent Blog Posts
4
Embedded Experiences not rendering after IBM Notes FP9
Wed, Sep 27th 2017 5:36a   Cameron Gregor
Embedded Experiences are no longer rendering after upgrading to FP9. I suspect it is something to do with the changes to Embedded Browser, either removing it or upgrading it or something else. I haven’t had a chance to investigate fully. Perhaps there may be a workaround, or perhaps this is specific to the way we are using embedded experiences. We use embedded experiences quite a bit at our company so we have rolled back for now. If I figure anything out I will post an update but just be a
4
BuildXPages Deployment Automation Tools – v1.0.0
Thu, Sep 21st 2017 12:47p   Cameron Gregor
After quite a bit of work I have finally published the first release of BuildXPages! What is BuildXPages? BuildXPages is a project which is useful if you are interested in Automating tasks that are involved in building XPages. For example you may be interested in automating some of these tasks: Building NSFs from an On-Disk Project Building Plugins and Features Refreshing NSF Designs Setting Template Inheritance of NSFs Start, Stop and Restart Http server Uploading Plugins to an NSF Update
8
Generating and Downloading Files Using XPages’ Persistence Service
Wed, Sep 13th 2017 4:42p   Cameron Gregor
When developing an XPages application you may run into the need to generate files to be downloaded by the user. For example: Generating a PDF Report Exporting Data to Excel Spreadsheet Creating a Zip File of several attachments Achieving these tasks usually raises 2 main problems to solve; What temporary place can I use to generate the files? How do I allow the user to download the generated files? For the temporary place problem, some common solution is to either generate the files to some
7
Bundle Inspector – Diagnosing XPages Plugin Resolution problems
Wed, Aug 2nd 2017 12:26p   Cameron Gregor
A common task with XPages development is to installing some plugins that provide additional functionality. If you do any plugin development of your own, you end up doing this task a lot more as you create new plugins, install new versions etc. It is also common to encounter some problems after installing plugins to your Domino Server! Maybe your expected plugin doesn’t load up at all? maybe the wrong version is loading? The standard method of diagnosing these problems is to use the OSGi c
1
Swiper Official Version 2 Release
Fri, Jul 21st 2017 1:52p   Cameron Gregor
So I have finally posted Swiper version 2 to OpenNTF! (and Github of course) Swiper OpenNTF Project Page Swiper Github Releases The latest version is 2.0.1,  and is the same as 2.0.0beta but with a bug fix for the toolbar buttons. Swiper 2.0.0 beta has been available on the Github project site for a few months, and the core functionality of it works as planned. There was however a bug within the shortcut buttons that I added to the menu bar, and this is a bit of a nasty bug that can cause del
2
Auto-width Bootstrap Column XPages Controls
Tue, Mar 21st 2017 1:13p   Cameron Gregor
I’ve been stuck working with OneUI Version 3 for the past couple of years, due to a regretful decision made at the beginning of my major project. OneUI was better than nothing but very frustrating at times. Finally, I have moved on to my next project and I am now using bootstrap (version 3) A common task when laying out a page using bootstrap is to divide sections up into rows and columns, and use the appropriate css styles to do so. I’m going to assume you are familiar with bo
6
Swiper FP8 Version Beta Release
Thu, Mar 16th 2017 12:50p   Cameron Gregor
Last week I released the ‘alpha’ version of Swiper which was untested on FP8 but presumed to be ok. So far I have only had good reports from the pioneers who have gone ahead and installed FP8 + the alpha version. I have since managed to ugrade my home office setup to FP8 which unfortunately has broken my ability to launch designer from eclipse but I am seeking some advice on fixing this up. In the meantime I have to test the slow way of building plugins, import plugins, restart R
2
Swiper FP8 Integration Rollout
Wed, Mar 8th 2017 12:43p   Cameron Gregor
Notes Domino 9.0.1 FP8 is finally here and as far as I know (I have yet to download it) it includes the necessary changes which will allow Swiper to swipe whatever it wants, whenever it wants, which is good news for people who don’t like to have ‘Build Automatically’ turned on. Plan of Attack for release of Swiper version 2.0.0 So, I haven’t actually downloaded FP8 yet,  so I can’t say for sure that the updated version works perfectly. Here is a bit of backgrou
4
Markdown XPages UIControl
Sun, Mar 5th 2017 11:44a   Cameron Gregor
Often when I’m designing an xpage, there might be a section of the page in which I want to explain some instructions to the user. Some options here are to: write the Instructions using html and embed directly in the xpage markup write the Instructions directly in the design pane and format using designer’s ui e.g. bold, color, size etc use some native xpage controls to achieve the desired result. Write the instructions in a richtext field on a notes document that is loaded to dis
3
TextDiff XPages control – For visual comparison of text
Tue, Feb 28th 2017 12:00p   Cameron Gregor
A few years back I stumbled across Google’s diff-match-patch project which provides some handy algorithms for text manipulation. At the time of discovery I was doing ‘classic’ notes development. Although I probably could have implemented something that worked in lotuscript with RichText or Mime, it wasn’t a priority at the time and I never bothered. Since then, I have been doing mainly XPages, and now that I have been also doing a bit of XPages Control development. I was




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition