0

我正在使用 jquery 来更改 CKEditor 实例中的标记。具体来说，我让某人从我的表单中的选择列表中选择一个徽标，然后用他们的选择更新 ckeditor 中的徽标。

但是，问题是徽标显示为断开的链接。如果我检查 ckeditor 源它是正确的，并且如果我右键单击图像并选择图像属性，它会在 img 对话框中正确显示，如果我然后确定该对话框，图像会正确显示在预览中。

如果我使用Firebug检查页面上的img标签本身，ckeditor已经把src放到了两个数据标签中，data-cke-565-src（这个名字好像变了）和data-cke-saved-src。但是 img 本身不再具有 src 属性。当我使用图像属性窗口使图像在编辑器中正确显示时，src 属性已返回。

我正在使用 getData 和 setData 来更改内容：

var emailSupport = {
editorName: 'HtmlBody',
getBodyText: function () {
    return CKEDITOR.instances[emailSupport.editorName].getData();
},

$getBodyText: function () {
    return $("<div>" + emailSupport.getBodyText() + "</div>");
},

setBodyText: function (h) {
    CKEDITOR.instances[emailSupport.editorName].setData(h instanceof jQuery ? h.html() : h);
    return h instanceof jQuery ? h : $("<div>" + h + "</div>");
},
refreshLogo: function (n, $h) {
    if (typeof $h === "undefined") $h = emailSupport.$getBodyText();
    var $emailLogo = $h.find("img.emailLogo");
    var $img = $("#" + n).clone().attr("id", null);
    if ($img.length > 0)
        $emailLogo.show().replaceWith($img.addClass("emailLogo"));
    else {
        $emailLogo.fadeOut();
        alert('Could not find selected image');
    }
    emailSupport.setBodyText($h);
}
};

这是我正在使用的 javascript 的一个子集，但应该是相关的东西。徽标本身位于页面的 DOM 中，但被隐藏了，这就是为什么我可以根据 GUID 抓取它们并将占位符徽标 img 替换为图像本身的副本。

我可能给了你比我需要的更多的代码，因为调试 setBodyText 显示正确的 HTML 被传递给 setData，所以很明显 ckeditor 正在剥离 src 属性。

在我看来，这是一个错误，但我想知道是否有人以前经历过这种情况，或者有解决方法。我试图避免在调用 setData 后手动更改 DOM，查找任何没有 src 属性的 img 标签并从 data-cke-saved-src 属性中复制它，但这是我能想到的唯一解决方法现在。

作为更新，在写这篇文章时，我尝试了一些替代文件，有时效果很好。它与文件名一致，适用于一个文件，而不适用于另一个文件，但我还没有弄清楚工作图像和损坏图像之间的区别是什么！

文件路径都是虚拟的，但是从根目录开始：它们都以 / 开头，例如：

<img width="160" data-cke-862-src="/Content/Logos/thumbs/w160_505_Logo.jpg.png" data-cke-saved-src="/Content/Logos/thumbs/w160_505_Logo.jpg.png" class="imagingThumb emailLogo" alt="505_Logo.jpg" />
4

1 回答 1

0

没有任何“适当”解决方案的建议，我只好自己推出它，以一种有点老套的方式。

这是我上面的替换 setBodyText 函数：

    setBodyText: function (h) {
    CKEDITOR.instances[emailSupport.editorName].setData(h instanceof jQuery ? h.html() : h, function () {
        // There seems to be a bug in CKEditor which is stripping out the logos/images when set
        // This callback code puts it back
        $("#cke_" + emailSupport.editorName + " iframe").contents().find("img").each(function() {
            var $img = $(this);
            if ($img.prop("src") == "") {
                $img.prop("src", $img.data("cke-saved-src"));
            }
        });
    });
    return h instanceof jQuery ? h : $("<div>" + h + "</div>");
},

我存储了编辑器的名称，因此我可以使用它来查找页面上包含编辑器的 iframe 的元素，然后查找任何图像，检查是否有空的 src 并再次将其放回。

我不知道为什么ckeditor（偶尔）会这样做，但这已经解决了问题。

于 2013-04-17T15:45:52.667 回答