1

コンテンツが保存された後に PHP から入力されるカスタム変数を使用して、カスタム wysiwyg エディターを作成しています。

たとえば、{image} はプレースホルダーで、コンテンツが保存された後に PHP から入力されます。

この場合、HTML コードのコンテンツ テンプレートは次のようになります。

<img src="{image}" />

これはある種のドラッグ アンド ドロップ システムであるため、このアイテムを wysiwyg キャンバスにドラッグできるはずですが、その {image} プレースホルダーに JavaScript を入力できないため、ブラウザーは画像を読み込むことができません。 . 私が知っているように、いくつかの古い Internet Explorer バージョンでは、デフォルトの「画像が壊れた」画像がこれらの img に表示されますが、最新のブラウザーでは単純に表示されません。

これらのアンロードされた画像を表示する方法はありますか(幅と高さの値と魔法を与えることによって)?

これをjavascriptを使わずにシンプルなCSSルールで作りたいと思っています。

私が見つけた1つの解決策は、画像にalt属性を与え、そのテキストがその要素の高さと高さを与えることです。

4

3 に答える 3

3

..を使用する必要があるonerrorため、画像の読み込みに失敗しますが、「保留中の画像」を表示して、公開時に実際の画像に置き換えられることをエンド ユーザーに示すことができます。

<img src="{image}" onerror="this.src='http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg';" width="100" height="100" />

URLをあなたのものに変更してください。

<img src="{image}" onerror="this.src='/images/temp_image.jpg';" width="100" height="100 />

例: http://jsfiddle.net/7FtfX/

于 2013-08-02T13:15:28.767 に答える
0

width要素の属性とheight属性を適度なプレースホルダー サイズに直接設定するのimgが、おそらく最適な方法です。CSS で行うこともできます。

.wsyiwyg img {
    width: 100px;
    height: 100px;
    background-color: #787878;
    margin: 5px;
}

JS を使用してすべてのimg要素をチェックし、属性を解析してから、いずれかをプレースホルダー イメージの形式にsrc置き換える(ただし、元のデータを保存し、保存/送信時に元に戻す) という方法の方が良いかもしれません。{image}src

于 2013-08-02T13:08:28.993 に答える
-1

width、heightプロパティ、および背景を使用します。サンプルを見る

于 2013-08-02T13:07:07.770 に答える