Preventing pasting of remotely hosted images in CKEditor
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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!
Then I will paste it into my CKEditor, where I will receive a warning…
And after clicking ok, I can see that everything except the image has been pasted…
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.
Hi!
Thank you for this explanation.
Actually, it works only when we paste images without simple uploads (text). I don’t know which change can I apply on your script to prevent pasting images even with simplle uploads.
Thank you!