Setting Absolute paths for images in CKEditor

With the new "Mobile First" responsive version of XMS Systems coming up for BETA release I was looking at the "News Letter" module and realised I have a problem with CKEditor not being able to insert absolute paths for images that needs to be inserted into the newsletter.

Without absolute paths the images will not display in the email becasue they are simply not where the email client expect them to be.

What is the problem?

When designing a website, or html email, you have two options to tell the viewing client, browser or email client, where to look for images.
Normally on a website you would use relative url that tells the browser to go and look for the image file in a position relative to the home page / root of the website.
So if your website how page is http://www.xms-systems.co.uk and your location of the images is in a folder named images the relative url to the images would be "../images" in its simpliest form. This means that the folder is a subfolder of the root of the website and the browser will go and look for the image at http://www.xms-systems.co.uk/images/your_image.jpg

That turns into a problem when trying to view an email because the relative path to an image is now taken from the location of the program you are viewing the email with or more probably your "temp" folder.
As an example, lets say you are viewing an email with some program on your pc. The program might be installed in the folliwing location: "c:/program/email_client" and your temporary folder might be in "c:/temp". Now the relative path to the image might be something like "c:/program/email_client/this_specific_email/images/your_image" or "c:/temp/some_random_text/images/your_image"

Enter Absolute Paths...

To get around this problem you need to tell the client to not look for the image in a location relative to your pc but somewhere on the internet. That is known as an "absolute path". You tell the client to go to http://www.xms-systems.co.uk/images/your_image.jpg to find the image.

General Warning.
This is also one of the easiest ways a spammer can see if your email address is active. If your email client is set to "display images by default" the spammer can see when your email client downloaded the image. This means the email account is active and he/she will send you more spam and possibly seel your email address to the next set of spammers.

CKEditor and Absolute paths.

I was struggeling for days finding a way to make CKEditor use absolute paths when editing the newsletter. Readung the docs, searching google and stackoverflow.com for a solution. Found loads but none really working or you need to edit the CKEditor code to make it work. I needed something easy that will not take up any time when upgrading CKEditor to the next version. The solution also needs to be dynamic so that it can be portable accross different domains.
The last issue is easy enough to solve...

The absolute path solution was so simple when I found it I couldn't believe I never saw it...

I am using KCFinder as the application to upload and brows images to the website. As part of the integration I define the "uploadURL" in the page before I instantiate the editor instance.

I had this path as a relative path to the images folder. i.e. "../images".
The solution is to simply make this path an absolute path. i.e. "http://www.xms-systems.co.uk/images"

Developers reading this blog post..., your integration might be slightly different than mine. However you still need to define that "uploadURL" somewhere. Just go and find it and make it an absolute path and CKEditor will enter the absolute path for the images.