如何防止 CKEditor 将标题设置为其 iframe？答案

【问题标题】：How to prevent CKEditor from setting the title to its iframe?如何防止 CKEditor 将标题设置为其 iframe？
【发布时间】：2013-01-28 08:47:15
【问题描述】：

我使用 CKEditor 以及 jQuery UI 的工具提示插件。发生的情况是 CKEditor 将 title 属性设置为其 iframe 元素，然后 jQuery 工具提示插件将其转换为工具提示，然后，每当您将鼠标悬停在编辑器的任何部分上时（每次编辑文本时都必须这样做），工具提示总是显示，说“富文本编辑器，elementId”。

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

而且我在 CKEditor 的 Javascript 中找不到设置 iframe 标题的代码部分，因此我可以将其删除。我发现的一部分是语言文件中的实际标题字符串，我可以在其中将“富文本编辑器”替换为空字符串，但它仍将 iframe 的标题设置为“，{elementId}”。

感谢任何帮助，我很想保留这两个插件。

【问题讨论】：

标签： jquery attributes ckeditor tooltip title

【解决方案1】：

遇到了完全相同的问题，为另一位不太可能很快需要屏幕阅读器的开发人员开发自定义 CMS。

感谢mihaisimi 的指点。通过深入研究 CKEditor 实例属性，我最终编写了下面的 JS 位，以从内容区域中删除“富文本编辑器，element_id”标题。

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

所以基本上只要 CKEditor 加载，我就将 CKEditor 的容器包装在一个 jQuery 对象中，我用.find() 查找实际内容div 并用.attr() 删除它的标题。

请注意，此解决方案需要 jQuery。我在“div 模式”下使用 CKEditor 4.1.1 版。任何在“iframe 模式”中使用类似版本的人都可能会将.find(".cke_wysiwyg_div") 更改为.find(".cke_wysiwyg_frame")。

例如，您可以将这段代码附加到 ckeditor/config.js 文件中。它不漂亮，但它有效。

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

【讨论】：

【解决方案2】：

您可以通过配置选项消除编辑器区域的标题（成为工具提示）：

config.title = false;

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

【讨论】：

【解决方案3】：

您可以使用简单的 javascript 轻松进行设置。您在下面有一个示例。在我的情况下，ck 4.0.1 用于所有以“webedit”开头的 id 的页面 div，工具提示将替换为我存储在评论属性中的文本。

一个 div 看起来像这样：

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

在创建实例时，我的代码会重置标题并将其替换为我的评论：

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;
            }
        }
    });

祝你有美好的一天，米海

【讨论】：

【解决方案4】：

您可以在工具提示选项中定义：

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

对于您想要预期 iFrame 的所有标签！

【讨论】：

【解决方案5】：

This is where the title is being set. 如您所见，编辑器无法更改它，因为这对于屏幕阅读器和一般 a11y 来说至关重要。但是，您可以更改 wysiwygarea 插件 的代码以拥有不同的东西。

【讨论】：

在这种情况下，我无意支持屏幕阅读器，因为这是针对按要求开发的内容管理系统，我们不希望有任何屏幕阅读器。所以，我仍然想更改它，但恐怕您引用的文件在我的 CKEditor 代码中不存在。 plugins 文件夹中没有 wysiwygarea 文件夹，整个 ckeditor 文件夹中也没有“iframe.setAttributes”字符串，正如“grep -Ri”所搜索的那样
你用的是什么版本的CKEditor？
最新的。在那个例子中是哪一个？我昨天下载了4.0.1的完整包，然后才回复查，4.0和3.6.6，它们都没有插件中的所见即所得。还是我完全误解了什么..？
如果您从 ckeditor.com 下载压缩版本，wysiwygarea 插件将合并到ckeditor.js。尝试从 github 克隆源代码，修改它们并使用来自 dev/builder 的 ckbuilder 构建您的自定义编辑器。