Question

We have a CKEditor in place, on a ASP.Net MVC 3 page:

var editor = CKEDITOR.replace(...);

Inside this editor we use some plugins to create several types of elements, the element causing trouble is created with this structure:

<div backendname="asfasdf" class="editableArea" contenteditable="false" displayname="asdfasdf"
     fieldheight="50" fieldlength="610" fieldtype="5" maxchars="0" required="true">
   <a href="google.com">
      <img align="top" alt="" hspace="0" src="http://someaddress/img.jpg"
           style="border-width: 0pt; border-style: solid; margin: 0pt;
           width: 420px; height: 315px;" vspace="0" />
   </a>
</div>

When creating this element, we are attaching (via jQuery) the click event with a function of our own, which sums up to this:

$jq(field.$).find('a').click(function (event) {
    event.preventDefault();
    event.returnValue = false;

    return false;
});

As you can see we’ve been trying some variations for the event cancelation to prevent anchor behaviour. When the element is first created this works as expected. The problem araises when we switch modes in CKEditor.

For those unfamiliar with CKEditor, when you switch modes between “source” and “wysiwyg/design” the iframe that design mode uses is destroyed and replaced with a textarea. When switching back into design, the iframe is recreated and all content populated.

We’ve tried to use this event on CKEditor to reattach the click event, like this:

editor.on('mode', function (e) {
 if (e.data.previousMode == 'source') {
    $jq("iframe").contents().find('.editableArea a').click(AnchorClick);
   }
});

function AnchorClick(event) {
   event.preventDefualt();
   event.originalEvent.preventDefault();
   event.preventPropagation();
   event.returnValue = false;
   return false;
} (this function was separated for debugging purposes)

Again, we tried anything we could think of, but still FF follows the link inside the iframe, which causes the lose of the CKEditor and its contents.

We cannot define href="...” in the anchor tag since the information in the CKEditor is stored for future usage, therefore we must store the true href in the link.

It’s a very peculiar question, I know. The truth is I can’t think of anything else to do and can’t find information about how to overcome FF behaviour in this particular case. Hopefully at least one of the many users of SO has faced a similar issue and can point us in the right direction.

Answer 1

It was a typo. This issue is solved.

function AnchorClick(event){
event.preventDefualt();
...
}