192 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 111
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 62
Preventing pasting of remotely hosted images in CKEditor
Mon, Nov 14th 2016 3
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 6
Controlling the order of Script Resources (e.g. Jquery) with a Custom ViewRootRenderer
Mon, Sep 19th 2016 3
Review: JRebel with Domino OSGi development
Mon, Sep 5th 2016 8
Extended Messages Control available as an XspLibrary
Tue, Jul 12th 2016 4
Top 10
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 111
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 62
Build System for XPages and OSGi plugins
Fri, Aug 8th 2014 10
Review: JRebel with Domino OSGi development
Mon, Sep 5th 2016 8
Build Automation for XPages Presentation Slides - AUSLUG/Inform 2015
Thu, Jun 11th 2015 6
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 6
Uploading Plugins Headlessly to Open Eclipse Update Site
Sat, Jul 18th 2015 5
Associating *.theme and *.xsp-config with Eclipse XML Editor
Wed, Mar 9th 2016 5
Webmail UI – You must learn about MIME
Wed, Apr 20th 2016 5
Select themeIds from plugins in Designer Xsp Properties Editor
Mon, Sep 8th 2014 4


Preventing pasting of remotely hosted images in CKEditor
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
camerongregor    

In 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 with URLs to external / internal applications.

This post is part of my XPages webmail tips series, and addresses a problem where, a user copies and pastes some HTML that includes images, from a webpage and pastes it into CKEditor for a message that is then sent via email. The recipient is then unable to see the image due to the fact they don’t have the same access as the author of the email.

The cause of problem is, when the image is pasted it is pasted as an img tag with a link to the location of the image on a server.
There is no guarantee that the email recipient can access the server that the image is located on. The server is possibly behind a firewall, OR if the HTML was copied from an internal system, then it is possible an external email recipient does not have access to that internal server.

Additionally even for Internal emails, if the html was copied from an XPages application and the copied image is located inside a Notes Document, the URL that is used for that image is only temporarily available by the Xpages Persistence service, and is only available to the user that copied the HTML.

The result of all of this is more complaints of “I can’t see any image”

Another CKEditor Plugin!

The solution is just a modified version of the CKEditor plugin in previous post. The plugin listens for pasted content, and strips out any remotely hosted Images.

CKEDITOR.plugins.add('blockpasteimagelink', {

	init : function(editor) {

		function replaceImgText(html) {

			var replacedSomething = false;

			var ret = html.replace(/<img[^>]*src="http.*?"[^>]*>/gi, function(img) {
				replacedSomething = true;
				return '';
			});

			if (replacedSomething) {
				alert('The Image you have attempted to paste is hosted on a remote server and may not be visible to others. Pasting these images is not currently supported, please upload an image file using the Image button in the toolbar.');
			}

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

		});

	}

});

Save the above javascript as a script library in your nsf, called ‘blockpasteimagelink’

Make sure to include the script library on your XPage, and then tell your InputRichText to use the plugin using the extraPlugins dojoAttribute. Here is a sample XPage:

<?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="/blockpasteimagelink.js" clientSide="true"></xp:script>
	</xp:this.resources>
	
	<xp:inputRichText id="inputRichText1" value="#{document1.body}">
		<xp:this.dojoAttributes>
			<xp:dojoAttribute name="extraPlugins" value="blockpasteimagelink"></xp:dojoAttribute>
		</xp:this.dojoAttributes>
	</xp:inputRichText>
	
</xp:view>

Now let’s test it out, I would like everyone to know about the mythical Jackalope, so I will copy some info from Wikipedia!

preventpastecopyjackalope

Then I will paste it into my CKEditor, where I will receive a warning…

preventpastewarning

And after clicking ok, I can see that everything except the image has been pasted…

preventpasteafter

Summary

So we have now prevented some more cases whereby the recipient of an email will have trouble viewing images, it can be a little frustating for a user, but probably less frustrating that having to re-send an email, so I call that a win.

I had also intended on looking into the possibility of modifying the plugin so that upon pasting a remote image, the browser would try to download that image and then upload to the XPages server to be attached as an embedded image, however I haven’t looked into that yet!

In our system we have another CKEditor plugin which will allows users to paste image data from the clipboard, this is a nicer solution and I will cover that in the next post.



---------------------
http://camerongregor.com/2016/11/15/preventing-pasting-of-remotely-hosted-images-in-ckeditor/
Nov 14, 2016
4 hits



Recent Blog Posts
111
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 11:12a   Cameron Gregor
In a previous post in this series I did a bit of an overview on how MIME works. We also did a little bit about how MIME works in XPages + Domino land. With this knowledge in hand we can now start to analyse the different ways a ‘Pretty words, pictures and attachments’ can be stored in the document. During development of the ‘XPages Webmail’ interface, I encountered many problems which could only be solved by investigating the MIME content in detail. To help me do this, I
62
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 10:00p   Cameron Gregor
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
4
Preventing pasting of remotely hosted images in CKEditor
Mon, Nov 14th 2016 11:21p   Cameron Gregor
In 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 with URLs to external / internal applications. This post is part of my XPages webmail tips series, and addresses a problem where, a user copies and pastes some HTML that includes images, from a webpage and pastes it into CKEditor for a message that is then sent via email. The recipient is then una
6
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 12:43a   Cameron Gregor
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 lik
3
Controlling the order of Script Resources (e.g. Jquery) with a Custom ViewRootRenderer
Mon, Sep 19th 2016 9:28a   Cameron Gregor
When loading Client Side Javascript libraries in XPages, sometimes the order that the libraries are ‘encoded’ (or written in HTML) in the tag is important. For example jQuery and some of it’s plugins can have some issues if Dojo is encoded first. By default in XPages you don’t have too much say in what is written out first, a nifty workaround for this has been shared by Sven Hasselbach (here and here) which utilises the lesser known tag. This workaround ensures t
8
Review: JRebel with Domino OSGi development
Mon, Sep 5th 2016 11:53p   Cameron Gregor
Last year I finally figured out how to use JRebel with Domino, and I posted a how-to video. I thought I would do a quick follow up to say how it’s going. It is going great! I can’t imagine giving back my JRebel license. I have gone entire days without restarting my http server. If you are only developing xpages from within an NSF, and don’t do any OSGi plugin development, then you really don’t have much need for JRebel. But if you are involved in any OSGi Library developm
4
Extended Messages Control available as an XspLibrary
Tue, Jul 12th 2016 8:49a   Cameron Gregor
A while ago I shared an Extended version of the messages control which allows for multiple messages to be displayed for a single control at the same time. Originally this was just shared as a ‘control within an NSF’. One of the problems with the control within an NSF approach is that you repeatedly get an ‘unknown tag’ compilation problem which eventually goes away after a ‘project clean’ but it is very annoying nonetheless. I receiving a request to package
5
Webmail UI – You must learn about MIME
Wed, Apr 20th 2016 10:14a   Cameron Gregor
If you were like me, you spent many years developing classic Notes applications before making the switch to XPages. If this was the case, you were no doubt comfortable with the notion of a RichText field. You probably even occasionally did some RichText manipulation in LotusScript, adding Paragraphs and formatting using RichTextStyles and RichTextNavigators, attaching Files using EmbeddedObjects. And then XPages comes along, and says “If you want to edit any RichText through XPages, it i
3
Tips for Creating a Webmail UI with XPages
Tue, Apr 19th 2016 8:38a   Cameron Gregor
Over the past year my main project has been an XPages application for project-related Email correspondence, with formal document management thrown it as well and a bunch of Action Item / comment functionality surrounding it all. Developing the application as it’s own email client presented a few different challenges that may not be encountered in normal xpages development. Along the way I have come across a few different gotchas that I thought I better make record of, both the the benefit
4
My Slides from AUSLUG 2016 Presentations
Fri, Apr 15th 2016 2:45a   Cameron Gregor
This year at AUSLUG I presented 2 sessions. ‘Anatomy of a UI Control’ and ‘Using Source Control for Domino Development’. I have just uploaded the slides to the AUSLUG community and thought I would also share to the wider world! Slides and description of sessions are below. If you have any questions please let me know! I hope to share more about extension library / control development soon. Anatomy of a UI Control This session was designed to just spark a bit of curiosity




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