使用setData更新CKEditor離開img標記沒有src

我正在使用jQuery來更改CKEditor實例中的標記。具體來說，我讓別人從我的表單中的選擇列表中選擇一個標誌，然後用他們的選擇更新ckeditor中的標誌。使用setData更新CKEditor離開img標記沒有src

但問題是，徽標顯示爲斷開的鏈接。如果我檢查ckeditor源是否正確，如果我右鍵單擊圖像並選擇圖像屬性，它會在img對話框中正確顯示，如果我然後確定該對話框，則圖像將正確顯示在預覽中。如果我使用Firebug檢查頁面上的img標籤本身，ckeditor已經將src放入了兩個數據標籤data-cke-565-src（這個名稱似乎改變了）並且data-cke-saved-src 。但img本身不再具有src屬性。當我使用Image Properties窗口使圖像在編輯器中正確顯示時，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" />

來源

2013-04-15 Steve Owen

如果沒有一個「適當的」解決方案的任何建議，我剛剛推出它自己，在有點怪異的方式。

這是我更換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-17 15:45:52

使用setData更新CKEditor離開img標記沒有src

回答

相關問題