Question

我正在使用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" />

Answer 1

没有任何关于“正确”解决方案的建议，我只是不得不以一种有点愚蠢的方式自己滚动它。

这是我从上面替换的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会这样做（偶尔），但这已经解决了问题。

使用setData更新CKEditor会使img标记没有src

1 个答案: