CKEditor 4: Image Properties dialog and custom preview image

Just to get you up to speed, I have set-up my CKEditor instance so that when viewing the WYSIWYG (live) mode [image:abc123] is replaced with the actual URL to the image.

So for example in the HTML source view, you see this:

<img src="[image:abc123]" />

But when you view the WYSIWYG (live) mode, it shows this:

<img src="/file/image/abc123" />

This is all working great. An issue I am now having is when you edit the image in Image properties. As the image does not exist, it show's the red x.

My question is, is there a way to customise the Image Properties dialog so that if it matches [image:abc123], it loads a different image URL in the Preview window?

This code doesn't work but might make it a little clearer what I'm trying to achieve here. 

CKEDITOR.on('dialogDefinition', function(evt) {
    if (evt.data.name == 'image') {
        var image_url = ???;
        var preview_image = ???;
        var file_id = image_url.value.match(/\[image:([a-zA-Z0-9-]+)\]/);
        if (file_id)
            preview_image.src = '/file/image/' + file_id[1];    
    }
});

Thanks in advance!