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.

Answer 2

You can eliminate the title (which becomes the tooltip) of the editor area through a config option:

config.title = false;

See http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-title

Answer 3

You can easily set this up with a simple javascript. You have a sample below. In my case ck 4.0.1 is used inline for all the page divs that have an id starting with "webedit", the tooltip is replaced with the text I am storing in the comment attribute.

A div will look like this:

<div id="webedit1" comment="My own tooltip">

On instance created my code resets the title and replaces it with my comment:

CKEDITOR.on( 'instanceReady', function( event ) {
        var editor = event.editor;
        var divElement = event.editor.element.$;

        if(divElement){
            var divComment = divElement.getAttribute("comment");
            if(divComment){
                divElement.title=divComment;
            }
        }
    });

Have a nice day, Mihai

Answer 4

You can define in your tooltip options:

$( document ).tooltip({
    items: "input[title],p[title],span[title],td[title],img[title],a[title]",
});

For all tags that you want the expected iFrame!

Answer 5

This is where the title is being set. As you can see, the editor provides no way to change it as this is a crucial thing for screen readers and general a11y. You can, however, change the code of the wysiwygarea plugin to have something different.