如何防止CKEditor在其iframe中设置标题?

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".

我使用了CKEditor和jQuery UI的工具提示插件。,CKEditor title属性设置为它的iframe元素和jQuery工具提示插件转换成一个工具提示,然后,当你用鼠标悬停在任何部分的编辑器(你每次你编辑文本),工具提示一直显示,称“富文本编辑器,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.

即使我将工具提示插件的选择器设置为“*:not(iframe)”，它仍然在这样做。到目前为止，我发现要让它不设置iframe的工具提示，唯一的方法是将“div”从选择器中排除，但是我也丢失了编辑器的粗体/斜体等选项的工具提示。

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}".

我在CKEditor的Javascript代码中找不到设置iframe标题的部分，所以我可以删除它。我找到的一个部分是在语言文件内的实际标题字符串，我可以用一个空字符串替换“富文本编辑器”，但它仍然将iframe的标题设置为“{eld}”。

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

如果有任何帮助，我很乐意保留这两个插件。

5 个解决方案

#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.

遇到了同样的问题，为其他不太可能很快就需要屏幕阅读器的开发人员开发了自定义的CMS。

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实例属性之后，我在下面编写了JS位，以便从内容区域中删除“富文本编辑器element_id”标题。

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().

所以基本上，当调用者加载时，我将调用jQuery对象包装调用者的容器，我使用.find()查找实际的内容div，并使用.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").

请注意这个解决方案需要jQuery。我在“div模式”中使用的是CKEditor版本4.1.1。任何在“iframe模式”中使用类似版本的人都可以将.find(“.cke_wysiwyg_div”)更改为.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.

您可以将这段代码附加到ckeditor/config中。js文件,例如。它不漂亮，但很管用。

Hope my solution helps anyone bumping into this problem.

希望我的解决方案能帮助任何遇到这个问题的人。

#2

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.

您可以使用简单的javascript轻松设置它。你有一个样品在下面。在我的例子中，ck 4.0.1用于所有id以“webedit”开头的页面div，工具提示被替换为我在comment属性中存储的文本。

A div will look like this:

div会是这样的:

<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

今天过得好吗，Mihai

#3

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!

对于所有您想要的iFrame的标签!

#4

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

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

#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.

正如您所看到的，编辑器没有提供修改的方法，因为这对于屏幕阅读器和一般a11y来说是至关重要的。但是，您可以更改wysiwygarea插件的代码，使其具有一些不同的内容。

#1