How to prevent CKEditor from setting the title to its iframe?

Question

I use the CKEditor and also the jQuery UI's tooltips plugin. What happens is that CKEditor sets the title attribute to its iframe element and the jQuery tooltips plugin converts that into a tooltip and then, whenever you hover with the mouse over any part of the Editor (which you have to do every time you edit text), the tooltip always shows, saying "Rich text editor, elementId".

Even if I set the tooltip plugin's selector to "*:not(iframe)", it still does it. The only way I've found so far to get it to not set the tooltip for the iframe is to exclude "div" from the selector, but then I also lose the tooltips for the bold/italic etc options of the Editor.

And I cannot find the part of the code in CKEditor's Javascript that sets the iframe title, so I could remove it. The one part that I have found is the actual title string inside the language files where I can replace "Rich text editor" with an empty string, but it still sets the iframe's title to ", {elementId}".

Any help appreciated, I would love to keep both plugins.

Answer 1

Bumped into the exact same problem, developing a custom CMS for another developer who isn't likely to need a screen reader anytime soon.

Thanks mihaisimi for your pointer. With a bit of digging into CKEditor instance properties, I ended up writing the JS bit below to remove the "Rich text editor, element_id" title from the content area.

CKEDITOR.on("instanceReady", function(e) {
 var $frame = $(e.editor.container.$).find(".cke_wysiwyg_div");
 if($frame) $frame.attr("title", "");
});

So basically as soon as the CKEditor loads I'm wrapping the CKEditor's container in a jQuery object, I look for the actual content div with .find() and remove its title with .attr().

Please note this solution requires jQuery. I'm using CKEditor version 4.1.1 in 'div mode'. Anyone using a similar version in 'iframe mode' would probably get away with changing .find(".cke_wysiwyg_div") to .find(".cke_wysiwyg_frame").

You could append the bit of code to the ckeditor/config.js file, for example. Its not pretty, but it works.

Hope my solution helps anyone bumping into this problem.