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

Question

我使用CKEditor和jQuery UI的工具提示插件。问题是CKEditor将title属性设置为其iframe元素，而jQuery工具提示插件将其转换为工具提示，然后无论何时您用鼠标悬停在编辑器上（每次编辑文本都必须这样做），工具提示始终显示，显示为“富文本编辑器，elementId”。

即使将tooltip插件的选择器设置为“*：not（iframe）”，它仍会这样做。到目前为止，我找到的唯一不设置iframe工具提示的方法是将“div”从选择器中排除，但这样我也失去了编辑器的粗体/斜体等选项的工具提示。

我无法找到CKEditor JavaScript代码中设置iframe title的部分，以便我可以删除它。我找到的唯一部分是语言文件中的实际标题字符串，我可以将“富文本编辑器”替换为空字符串，但它仍将iframe的title设置为“，{ elementId}”。

非常感谢你的帮助，我希望能保留两个插件。

- 3Nex

Answer 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 加载，我就用 jQuery 对象将 CKEditor 的容器包装起来，然后使用 .find() 查找实际内容的 div 并使用 .attr() 删除其标题。

请注意，此解决方案需要 jQuery。我在 'div mode' 中使用 CKEditor 版本 4.1.1。使用类似版本的人在 'iframe mode' 中可能只需将 .find(".cke_wysiwyg_div") 更改为 .find(".cke_wysiwyg_frame") 即可。

您可以将这段代码附加到 ckeditor/config.js 文件中。虽然不太美观，但它能正常工作。

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

- Robbert

Answer 2

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

config.title = false;

请查看http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-title。

- Paul

Answer 3

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

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

对于您希望预期的 iFrame 的所有标签！

- user3515632

Answer 4

你可以通过简单的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;
            }
        }
    });

祝您有美好的一天，Mihai。

- mihaisimi

Answer 5

这里是标题设置的地方。正如您所见，编辑器没有提供更改它的方法，因为这对于屏幕阅读器和一般的a11y来说是至关重要的事情。但是，您可以更改wysiwygarea插件的代码以获得不同的结果。

- oleq

---

在这种情况下，我没有支持屏幕阅读器的意图，因为这是一个按请求开发的内容管理系统，我们不希望使用任何屏幕阅读器。所以，我仍然想进行更改，但我担心您引用的文件在我的CKEditor代码中不存在。在插件文件夹中没有wysiwygarea文件夹，在整个ckeditor文件夹中也没有“iframe.setAttributes”字符串，可以通过“grep -Ri”搜索。 - 3Nex

你使用的 CKEditor 版本是哪个？ - oleq

最新的是哪个？我在回复之前昨天下载了4.0.1的完整包进行检查，4.0和3.6.6都没有wysiwygarea插件。或者我完全误解了什么..？ - 3Nex

如果您从 ckeditor.com 下载了压缩版本，则 wysiwygarea 插件已合并到 ckeditor.js 中。尝试从 GitHub 克隆源代码，修改它们并使用 dev/builder 中的 ckbuilder 构建自定义编辑器。 - oleq