198 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Generating and Downloading Files Using XPages’ Persistence Service
Wed, Sep 13th 2017 99
Bundle Inspector – Diagnosing XPages Plugin Resolution problems
Wed, Aug 2nd 2017 2
Swiper Official Version 2 Release
Fri, Jul 21st 2017 3
Auto-width Bootstrap Column XPages Controls
Tue, Mar 21st 2017 3
Swiper FP8 Version Beta Release
Thu, Mar 16th 2017 3
Swiper FP8 Integration Rollout
Wed, Mar 8th 2017 3
Markdown XPages UIControl
Sun, Mar 5th 2017 7
Top 10
Generating and Downloading Files Using XPages’ Persistence Service
Wed, Sep 13th 2017 99
Preventing Pasting of Images in CKEditor
Mon, Nov 14th 2016 12
Pasting Images into XPages CKEditor
Sun, Feb 12th 2017 12
Webmail UI – You must learn about MIME
Wed, Apr 20th 2016 8
Build Automation for XPages Presentation Slides - AUSLUG/Inform 2015
Thu, Jun 11th 2015 7
Tips for Creating a Webmail UI with XPages
Tue, Apr 19th 2016 7
Preventing pasting of remotely hosted images in CKEditor
Mon, Nov 14th 2016 7
XPages webmail – Using Mime Inspector to debug Mime
Tue, Feb 14th 2017 7
Markdown XPages UIControl
Sun, Mar 5th 2017 7
Controlling the order of Script Resources (e.g. Jquery) with a Custom ViewRootRenderer
Mon, Sep 19th 2016 6


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

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

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>

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!



---------------------
http://camerongregor.com/2017/02/13/pasting-images-into-xpages-ckeditor/
Feb 12, 2017
13 hits



Recent Blog Posts
99
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
2
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
3
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
3
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
3
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
3
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
7
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
1
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
7
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
13
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




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