We have been using the uCKEditor plugin for umbraco for a few months now. We also installed a plugin for it called Image Maps.
Recently, one of our content editors noticed a sharp drop in performance while editing some pages. After testing it for a while I noticed that removing all image maps from the source completely solved the performance problem, the editor was responsive lightning fast again.
An example of an imagemap added by the plugin:
<img src="image.jpg" usemap="#imgmap20156281337" />
<map id="imgmap20156281337" name="imgmap20156281337">
<area coords="75,74,183,206" href="http://www.example.com" shape="rect"/>
<area coords="408,169,533,368" href="http://www.example.com" shape="rect" />
</map>
In reality, the plugin simply adds a few lines of HTML to the image, so I couldn't understand why it would affect performance so severely.
Therefore, I decided to check where the breakpoint would be for adding imagemaps. In a page with 5 images, I started adding imagemaps to those images via the plugin.
The first imagemap showed no performance drop. After the second image map, a slight delay started to manifest with every user action. Every imagemap afterwards made the delay progressively worse to the point where at 5 images with 5 imagemaps, the editor takes over 4-5sec to just move the cursor 1 character distance left/right. This is what my content editor colleague experienced.
I tried adding the imagemaps manually(without the plugin) and I noticed that we still get the performance issues. However, the editor seems to run fine in <>Source view, but as soon as we switch back to default the performance drops dramatically. It seems that the editor is having problems rendering the imagemaps on top of the images.
What is causing this horrible performance when working with multiple image maps in the same editor? Is there anything we can do about it?
I discovered what was causing the problem!
While communicating with the creator of the imagemaps plugin, he referred me to his test page: http://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo4/
When we are working locally in uCKEditor and we insert an image from the media picker, the image gets inserted using a relative local path like:
src="/media/1370030/4483_a.jpg"
Then I tried to paste the same html to the remote test page, and naturally, I had to include the full domain path to the image:
src="http://www.dphtrading.dk/media/1370030/4483_a.jpg"
The first thing I noticed was that locally, uCKEditor draws borders on the lines specified in the imagemaps for a specific image. I took a screenshot to illustrate:
https://i.sstatic.net/PVOwl.jpg
While on the remote test server, there were no borders and no performance problems. So I inserted the full domain path for the images into our uCKEditor and this solved the performance problems (and removed the imagemap borders for some reason).
It looks like uCKEditor and probably CKEditor in general doesn't like the combination of relative file paths and imagemaps for the same image.
