Pasting Images into XPages CKEditor

by camerongregor · February 13, 2017

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:

// Get the Base Url of the nsf so we can figure out the location of simpleuploads plugin
var urlBase = document.URL.substr(0,document.URL.lastIndexOf('.nsf') + 4);

// Tell CKEditor not to include a random timestamp that forces cache (because Domino gets upset if it is there)
CKEDITOR.timestamp = '';

// Tell CKEditor to include simpleuploads as an available plugin
CKEDITOR.plugins.addExternal('simpleuploads', urlBase + '/simpleuploads/', 'plugin.js');

// Disable the file upload part of SimpleUploads
CKEDITOR.config.filebrowserUploadUrl = 'dontuploadfiles';
		
CKEDITOR.on('instanceReady', function(e) {

	var currPageUrl = document.location.href; 

	e.editor.config.filebrowserUploadUrl = false;

	if (currPageUrl.indexOf('?') === -1) {
		e.editor.config.filebrowserImageUploadUrl = currPageUrl;
	} else {
		e.editor.config.filebrowserImageUploadUrl = currPageUrl.substring(0, currPageUrl.indexOf('?'));
	}

    // Listen for Start Upload
    e.editor.on( 'simpleuploads.startUpload' , function(ev) {

        var data = ev.data;

        var id = ev.editor.element.$.id;
        
        if (ev.data.url.indexOf('?') !== -1) {
        	ev.data.url = ev.data.url.substring(0, currPageUrl.indexOf('?'));
        }        
        
        // Add the xpage viewid and the client id of the inputRichText 
        ev.data.url += '?$$axtarget=' + id + '&$$viewid=' + XSP.findForm(id)['$$viewid'].value;         

        var extraFields = ev.data.extraFields || {};

        var imgid = CKEDITOR.tools.getNextId();
        var fileName = imgid;

        ev.data.name = fileName + '.png';

        CKEDITOR.tools.extend(extraFields, {
            'fileName': fileName + '.png',
            'actionType': 'embedded-image'
        });

        ev.data.extraFields = extraFields;

        // Tell the Request to expect a html document in response
        ev.data.xhr = new XMLHttpRequest();
        ev.data.xhr.responseType = 'document';
    
    });
    
    e.editor.on( 'simpleuploads.serverResponse' , function(ev) {
       	
        var respXml = ev.data.xhr.responseXML;
        var jsonText; // = respXml.documentElement.childNodes[1].firstChild.innerHTML;;
        
        if (!respXml) {
        	/*
 				I am aware that parsing html with regex is not recommended
				however the simple upload plugin does not allow for setting 
				the responseType to document, and the response should be the same
        	 */ 
        	var re = /.*<textarea>(.*)<\/textarea>.*/;
        	var jsonText = ev.data.xhr.responseText.replace(re, "$1");
       
        } else {
        	jsonText = respXml.documentElement.childNodes[1].firstChild.innerHTML;
        }

		var embeddedImage = XSP.fromJson(jsonText);

		if (null != embeddedImage && embeddedImage.statusMessage == "SUCCESS") {

			var imageElement = ev.editor.document.createElement(embeddedImage.tag);
			imageElement.setAttribute("src", embeddedImage.src);
			imageElement.setAttribute("data-cke-saved-src", embeddedImage.dataSrc);
			imageElement.setAttribute("alt", ev.data.altText);

			ev.editor.insertElement(imageElement);
			
		} else {
		
			if (null != embeddedImage) {
				XSP.alert(embeddedImage.statusMessage);
			} else {
				console.log("Error:IbmImage:ibmxspimage.js:load");
			}
		}
		
		var el = ev.editor.document.getById( ev.data.data.id );
		
		if (!el) {
		
		} else {
			if (ev.data.data.originalNode)
				el.$.parentNode.replaceChild(ev.data.data.originalNode, el.$);
			else
				el.remove();		
		}
		
		ev.editor.fire("updateSnapshot");		
		ev.cancel();        	
        	
    });    
    
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

// Get the Base Url of the nsf so we can figure out the location of simpleuploads plugin

var urlBase = document.URL.substr(0,document.URL.lastIndexOf('.nsf') + 4);

// Tell CKEditor not to include a random timestamp that forces cache (because Domino gets upset if it is there)

CKEDITOR.timestamp = '';

// Tell CKEditor to include simpleuploads as an available plugin

CKEDITOR.plugins.addExternal('simpleuploads', urlBase + '/simpleuploads/', 'plugin.js');

// Disable the file upload part of SimpleUploads

CKEDITOR.config.filebrowserUploadUrl = 'dontuploadfiles';

CKEDITOR.on('instanceReady', function(e) {

var currPageUrl = document.location.href;

e.editor.config.filebrowserUploadUrl = false;

if (currPageUrl.indexOf('?') === -1) {

e.editor.config.filebrowserImageUploadUrl = currPageUrl;

} else {

e.editor.config.filebrowserImageUploadUrl = currPageUrl.substring(0, currPageUrl.indexOf('?'));

}

// Listen for Start Upload

e.editor.on( 'simpleuploads.startUpload' , function(ev) {

var data = ev.data;

var id = ev.editor.element.$.id;

if (ev.data.url.indexOf('?') !== -1) {

ev.data.url = ev.data.url.substring(0, currPageUrl.indexOf('?'));

}

// Add the xpage viewid and the client id of the inputRichText

ev.data.url += '?$$axtarget=' + id + '&$$viewid=' + XSP.findForm(id)['$$viewid'].value;

var extraFields = ev.data.extraFields || {};

var imgid = CKEDITOR.tools.getNextId();

var fileName = imgid;

ev.data.name = fileName + '.png';

CKEDITOR.tools.extend(extraFields, {

'fileName': fileName + '.png',

'actionType': 'embedded-image'

});

ev.data.extraFields = extraFields;

// Tell the Request to expect a html document in response

ev.data.xhr = new XMLHttpRequest();

ev.data.xhr.responseType = 'document';

});

e.editor.on( 'simpleuploads.serverResponse' , function(ev) {

var respXml = ev.data.xhr.responseXML;

var jsonText; // = respXml.documentElement.childNodes[1].firstChild.innerHTML;;

if (!respXml) {

I am aware that parsing html with regex is not recommended

however the simple upload plugin does not allow for setting

the responseType to document, and the response should be the same

var re = /.*<textarea>(.*)<\/textarea>.*/;

var jsonText = ev.data.xhr.responseText.replace(re, "$1");

} else {

jsonText = respXml.documentElement.childNodes[1].firstChild.innerHTML;

}

var embeddedImage = XSP.fromJson(jsonText);

if (null != embeddedImage && embeddedImage.statusMessage == "SUCCESS") {

var imageElement = ev.editor.document.createElement(embeddedImage.tag);

imageElement.setAttribute("src", embeddedImage.src);

imageElement.setAttribute("data-cke-saved-src", embeddedImage.dataSrc);

imageElement.setAttribute("alt", ev.data.altText);

ev.editor.insertElement(imageElement);

} else {

if (null != embeddedImage) {

XSP.alert(embeddedImage.statusMessage);

} else {

console.log("Error:IbmImage:ibmxspimage.js:load");

}

var el = ev.editor.document.getById( ev.data.data.id );

if (!el) {

} else {

if (ev.data.data.originalNode)

el.$.parentNode.replaceChild(ev.data.data.originalNode, el.$);

else

el.remove();

}

ev.editor.fire("updateSnapshot");

ev.cancel();

});

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.

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

	<xp:this.resources>
		<xp:script src="/xspSimpleUploads.js" clientSide="true"></xp:script>
	</xp:this.resources>

	<xp:this.data>
		<xp:dominoDocument var="document1" formName="Post"></xp:dominoDocument>
	</xp:this.data>
	
	<xp:table>
		<xp:tr>
			<xp:td>
				<xp:label value="Subject:" id="subject_Label1" for="subject1"></xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText value="#{document1.Subject}" id="subject1"></xp:inputText>
			</xp:td>
		</xp:tr>
	</xp:table>
	<xp:inputRichText id="inputRichText1" value="#{document1.Body}">
		<xp:this.dojoAttributes>
			<xp:dojoAttribute name="extraPlugins" value="simpleuploads"></xp:dojoAttribute>
		</xp:this.dojoAttributes>
	</xp:inputRichText>
	<xp:br></xp:br>
	<xp:button value="Save" id="button1">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xp:saveDocument var="document1"></xp:saveDocument>
			</xp:this.action>
		</xp:eventHandler>
	</xp:button>

	<xp:viewPanel rows="30" id="viewPanel1" pageName="/Home.xsp">
		<xp:this.facets>
			<xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="headerPager" id="pager1"></xp:pager>
		</xp:this.facets>
		<xp:this.data>
			<xp:dominoView var="view1" viewName="Posts"></xp:dominoView>
		</xp:this.data>
		<xp:viewColumn columnName="Subject" id="viewColumn1" displayAs="link" openDocAsReadonly="true">
			<xp:viewColumnHeader value="Subject" id="viewColumnHeader1"></xp:viewColumnHeader>
		</xp:viewColumn>
	</xp:viewPanel>

</xp:view>

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>

<xp:script src="/xspSimpleUploads.js" clientSide="true"></xp:script>

</xp:this.resources>

<xp:this.data>

<xp:dominoDocument var="document1" formName="Post"></xp:dominoDocument>

</xp:this.data>

<xp:table>

<xp:tr>

<xp:td>

<xp:label value="Subject:" id="subject_Label1" for="subject1"></xp:label>

</xp:td>

<xp:td>

<xp:inputText value="#{document1.Subject}" id="subject1"></xp:inputText>

</xp:td>

</xp:tr>

</xp:table>

<xp:inputRichText id="inputRichText1" value="#{document1.Body}">

<xp:this.dojoAttributes>

<xp:dojoAttribute name="extraPlugins" value="simpleuploads"></xp:dojoAttribute>

</xp:this.dojoAttributes>

</xp:inputRichText>

<xp:br></xp:br>

<xp:button value="Save" id="button1">

<xp:eventHandler event="onclick" submit="true" refreshMode="complete">

<xp:this.action>

<xp:saveDocument var="document1"></xp:saveDocument>

</xp:this.action>

</xp:eventHandler>

</xp:button>

<xp:viewPanel rows="30" id="viewPanel1" pageName="/Home.xsp">

<xp:this.facets>

<xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="headerPager" id="pager1"></xp:pager>

</xp:this.facets>

<xp:this.data>

<xp:dominoView var="view1" viewName="Posts"></xp:dominoView>

</xp:this.data>

<xp:viewColumn columnName="Subject" id="viewColumn1" displayAs="link" openDocAsReadonly="true">

<xp:viewColumnHeader value="Subject" id="viewColumnHeader1"></xp:viewColumnHeader>

</xp:viewColumn>

</xp:viewPanel>

</xp:view>

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.

Tags: ckeditor xpages

Jesper Kiaer says:

February 13, 2017 at 9:10 pm

Very Nice 🙂

Reply
- camerongregor says:
  
  February 13, 2017 at 9:17 pm
  
  Thanks Jesper!
  
  Reply
Timothy Briley says:

February 14, 2017 at 3:37 am

Cameron,

Any chance you could put up a demo on Youtube?

Reply
- camerongregor says:
  
  February 14, 2017 at 9:44 am
  
  Hi Timothy, sure thing I will do one sometime this week
  
  Reply
- camerongregor says:
  
  February 14, 2017 at 10:44 pm
  
  Hi Tim, demo is uploaded and embedded at bottom of post
  
  Reply
Per Henrik Lausten says:

August 14, 2017 at 5:40 pm

Hi Cameron, I got an invalidStateError in Internet Explorer 11 which prevented pasting of the image. I fixed it by removing the line where the xhr responseType is set (ev.data.xhr.responseType = ‘document’;) – see https://stackoverflow.com/questions/20760635/why-does-setting-xmlhttprequest-responsetype-before-calling-open-throw for a similar error.

Do you get the same error with IE?

Reply
- camerongregor says:
  
  August 21, 2017 at 10:12 am
  
  Sorry for the delayed response. Yeah that seems to make sense.
  Basically, the xpages code sends the response in a xml format which is responseType = ‘document’. So I had asked Alfonso to make SimpleUploads use a pre-created xhr object so that I could set the response type to document. This seems to cause the problem you say, because it looks like the error is caused if you set responseType before the ‘open’ method call.
  
  There is some code in my solution (lines 64-72) above that falls back to the default ‘json’ response type, in which it will treat the response a a single string, extract the contents of a particular part using regex. I think this woks just fine and sounds like it is more reliable solution (thanks to IE!) I just did the document response way because it was more ‘correct’
  
  Thanks for pointing this out, I hope that anyone else with this problem will see this. Does you commented out solution work ok with chrome / firefox? if so I will update the code above to comment it out as well
  
  Reply
  - Per Henrik Lausten says:
    
    August 21, 2017 at 3:57 pm
    
    Hi Cameron, yes the commented out solution works with Chrome/Firefox/Safari too 🙂
    
    Reply
Oliver Busse says:

November 27, 2017 at 11:54 pm

Hi Cameron!
I just installed the plugin but getting a problem:
I first also had to comment out the line Per already mentioned. Now I have a problem in line 71 of your code which tries to read ev.data.xhr.responseText – the responseText is just not in the xhr object (not shown in Chrome debugger). It seems that the response is empty though the response URL points to a valid resource – the server computed it as expected. So far the solution is not usable. Running 9.0.1FP7 if this is important.
Any ideas?

Reply
- camerongregor says:
  
  November 28, 2017 at 12:11 pm
  
  Hi Oliver, sorry it’s not working yet
  What properties are in the xhr object? e.g. add a logging statement just before trying to use responseText
  console.log(ev.data.xhr);
  
  Also what if you look at the ‘network’ tab of Chrome Debugger, is there anything in the response for that related XHR network call?
  
  Reply
  - Oliver Busse says:
    
    December 1, 2017 at 7:51 pm
    
    It’s working on a plain Xpage, so it’s the same problem we have on our app in general with adding images also via the toolbar button.
    BTW: it also won’t work w/o a datasource attached to the richtext control, as the response from the XHR request will be a “500 command not handled exception”. I guess it’s the $$-stuff that is submitted to the server and the server not knowing what to do with it.
    
    Reply
Sridhar says:

June 2, 2018 at 6:21 am

Hi
I brought a plugin from simpleuploads
I’m using Notes 9.0.1
I have obtained the simple uploads plugin, and put it in my WEB-INF directory of the NSF
Created a Javascript script library ‘xspSimpleUploads’
Created a xpage with richtext field and added Dojo attribute “extraPlugins” “simpleuploads added JS library to xpages resources
When I tried to see the result, nothing is happening,
did I miss anything here ???

Reply
Sridhar says:

June 12, 2018 at 3:52 am

Hi

I followed every step you mentioned in this blog, but it is not working in IE11 but working fine in Google Chrome, Any suggestions on how to make it work on IE11, because all my users use IE11

Thanks
Sridhar

Reply
- camerongregor says:
  
  June 12, 2018 at 9:18 am
  
  Hi Sridhar, sorry for the slow response! Did you read Per’s comment regarding IE 11 ? have you tried his suggestion?
  
  Reply
  - Sridhar says:
    
    December 12, 2018 at 5:20 am
    
    Hi Cameron,
    
    I tried that suggestion, still not working, is there any browser security settings i need to change ?
    
    Sridhar
    
    Reply
May says:

July 5, 2018 at 1:14 am

Hi Cameron, as I can see your CKeditor is different then mine. I can’t paste an image in my body. Can you tell me which version of CKeditor you have and how you update it on the server please.
Thanks
May

Reply
May says:

July 5, 2018 at 10:20 pm

Hi Cameron, the CKeditor I have doesn’t do anything when I copy paste an image did you change your version of CKeditor on Notes Server ? If yes, which version you used and how you update on server.

Thank you
May

Reply
- camerongregor says:
  
  July 6, 2018 at 3:30 pm
  
  Hi May,
  I am using the CKEditor that is there by default for Domino Server (I have not upgraded the version). Currently using Domino 9.0.1 FP7
  What version of Domino are you using? which Browser are you using to paste the images?
  
  Reply
  - May says:
    
    July 6, 2018 at 10:43 pm
    
    Hi Cameron,
    
    I’m using Domino 9.0.1 FP9 and the version of CKEditor is 4.5.6.1. I have an XPages with an inputRichText and when I try to copy paste an image from Snipping Tool is not doing anything with Firefox version 52.9.0. Do I do something wrong .
    
    My other question is when I open an existing document with a mime on the browser, all image doesn’t show on the inputRichText. Do you have an idea.
    
    Thank you
    May
    
    Reply
  - May says:
    
    July 14, 2018 at 12:20 am
    
    Hi Cameron
    
    I found what was the problem, I had in my xsp.properties “xsp.client.script.dojo.html5attr=true” and that cause problem so I removed it. I bought the simpleuploads plugins and that work great.
    Thanks
    May
    
    Reply
    - camerongregor says:
      
      July 14, 2018 at 3:36 pm
      
      That is Fantastic May I am glad you have found a solution. Sorry I was not of much help.
      Thank you for posting this so that others may also benefit if they have the same problem
      I am glad the plugin is working for you!
      
      Reply
May says:

July 9, 2018 at 9:53 pm

Hi Cameron,

for my second question here is the details of what I see with your Mime Inspector maybe that will help you to help me.

Has Embbeded Images to Save Yes
Has Attachments to Save No
Is Mime Yes
Is Discarded Yes

multipart/relatedEncoding:no encoding header
multipart/alternativeEncoding:no encoding header
text/plainCharset:iso-8859-1Encoding:quoted-printable
text/htmlCharset:iso-8859-1Encoding:quoted-printable
image/jpegDisposition:inline; filename=”craft_beer_1800.jpg”; size=179021;creation-date=”Thu, 21 Jun 2018 11:47:32 GMT”;modification-date=”Thu, 21 Jun 2018 11:47:32 GMT”Encoding:binary

Thanks.

May

Reply
Tali Berzins says:

September 11, 2018 at 4:50 am

Hello,

Is Swiper going to be compatible with version 10 Notes/Domino? Thank you, Tali

Reply
- camerongregor says:
  
  September 11, 2018 at 9:48 am
  
  Hi Tali, I haven’t tried it with version 10 yet but I will ask around and see if it is working for those who have been beta testing it
  
  Reply
May says:

December 11, 2018 at 8:52 am

Hi Cameron

I bought the plugins SimpleUpload and work well with your code, but I can’t configure to get work the copy paste image and add file in the same CKeditor. What I need to add in your code to make the add file work ? Thanks you May

Reply