0

jquery を使用して、CKEditor インスタンスのマークアップを変更しています。具体的には、フォームの選択リストから誰かにロゴを選択させてから、自分の選択で ckeditor のロゴを更新します。

ただし問題は、ロゴが壊れたリンクとして表示されることです。ckeditor のソースを確認すると正しく、画像を右クリックして [画像のプロパティ] を選択すると、img ダイアログ ボックスに正しく表示され、そのダイアログを OK すると、画像がプレビューに正しく表示されます。

ページ上の img タグ自体を確認するために Firebug を使用すると、ckeditor は src を 2 つのデータ タグ、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 に基づいてロゴを取得し、プレースホルダーのロゴ画像を画像自体のコピーに置き換えることができます。

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