2

私は PHP で単純な HTML メール デザイン エディターを作成しており、これがどのように表示されるかのデモも示しています。

画像をオフにした gmail などの電子メール クライアントでこれがどのように表示されるかをユーザーに示すことも非常に役立つと思います。

これに対する私の最善のアプローチは何ですか？これがgmail/hotmailなどでどのように行われるか知っている人はいますか?

正規表現を使用して単純に削除img -> srcしますか?css background: url

背景部分を削除したい: background="url"テーブルで background-image:url(url);使用され、インライン cssを使用

HTMLテキストからimgとbackrgound-imagesを実際に削除したいのですが、同じ種類のアイデアを持つこの質問を見つけました。

または、このコードを変更して、背景画像でも動作するようにすることはできますか?

4

7 に答える 7

3

gmail や同様の Web メールの動作を完全に模倣するには、タグと background: css 属性を適切に置き換えて、プレースホルダーを表示し、ここに画像があることをユーザーに明確にします。

通常、メッセージは iframe に読み込まれるため、メッセージ サーバー側をクリーンアップして、不要なタグをすべて削除し、それに応じてプレビューで画像を置き換えることをお勧めします。

HTML を検証するために正規表現だけを使用するのは賢明ではなく、おそらく安全のために DOM ツリーをトラバースする必要があるという Michal に同意します。

始めに roundcube で使用されている Frederic Motteによる washtml を見てみませんか?

于 2012-04-10T12:39:06.260 に答える
3

不正確なことが多い正規表現の代わりに PHP DOM を使用することもお勧めします。文字列からすべての img タグとすべての背景属性を削除するために使用できるコード例を次に示します。

// ...loading the DOM
$dom = new DOMDocument();
@$dom->loadHTML($string);  // Using @ to hide any parse warning sometimes resulting from markup errors
$dom->preserveWhiteSpace = false;
// Here we strip all the img tags in the document
$images = $dom->getElementsByTagName('img');
$imgs = array();
foreach($images as $img) {
    $imgs[] = $img;
}
foreach($imgs as $img) {
    $img->parentNode->removeChild($img);
}
// This part strips all 'background' attribute in (all) the body tag(s)
$bodies = $dom->getElementsByTagName('body');
$bodybg = array();
foreach($bodies as $bg) {
    $bodybg[] = $bg;
}
foreach($bodybg as $bg) {
    $bg->removeAttribute('background');
}

$str = $dom->saveHTML();

テーブルの代わりに body タグを選択しました。<table>それ自体にはbackground属性がなく、 bgcolor. バックグラウンドのインライン css プロパティを削除するには、sabberworm の PHP CSS パーサー を使用して、DOM から取得した CSS を解析できます。これを試してください。

// Selecting all the elements since each one could have a style attribute
$alltags = $dom->getElementsByTagName('*');
$tags = array();
foreach($alltags as $tag) {
    $tags[] = $tag;
} $css = array();
foreach($tags as &$tag) {
    $oParser = new CSSParser("p{".$tag->getAttribute('style')."}");
    $oCss = $oParser->parse();
    foreach($oCss->getAllRuleSets() as $oRuleSet) {
        $oRuleSet->removeRule('background');
        $oRuleSet->removeRule('background-image');
    }
    $css = $oCss->__toString();
    $css = substr_replace($css, '', 0, 3);
    $css = substr_replace($css, '', -2, 2);
    if($css)
        $tag->setAttribute('style', $css);
}

たとえば、このコードをすべて一緒に使用すると、

$string = '<!DOCTYPE html>
<html><body background="http://yo.ur/background/dot/com" etc="an attribute value">
<img src="http://your.pa/th/to/image"><img src="http://anoth.er/path/to/image">
<div style="background-image:url(http://inli.ne/css/background);border: 1px solid black">div content...</div>
<div style="background:url(http://inli.ne/css/background);border: 1px solid black">2nd div content...</div>
</body></html>';

PHPは出力します

<!DOCTYPE html>
<html><body etc="an attribute value">
<div style="border: 1px solid black;">div content...</div>
<div style="border: 1px solid black;">2nd div content...</div>
</body></html>
于 2012-04-14T13:43:36.923 に答える
1

通常、正規表現を使用してhtmlを解析することはお勧めしません。

より良いアプローチは、htmlサーバー側を解析し、それを操作して画像または画像src属性を削除することだと思います。私が成功したライブラリはhttp://simplehtmldom.sourceforge.net/ですが、公式のPHPDOM拡張機能を使用できると思います。

背景画像の削除はもっと難しいかもしれません。{background：none}のようなものをhtml要素に適用するには、 http：//www.pelagodesign.com/sidecar/emogrifier/のようなものを使用する必要がある場合があります。ただし、CSS背景画像は最新バージョンのMicrosoft Outlookではサポートされていないため、ほとんどの電子メールクライアントで電子メールの一貫性を保つために、最初からCSS背景画像を使用しないことをお勧めします。

于 2012-04-08T08:42:42.560 に答える
1

同様の質問をしました（実際の問​​題ではなく、ソリューションで）：文字列から特定のタグと特定の属性を取り除く方法は？(解決策)

これは、定義済みの設定に従って HTML 入力をクリーンアップ (およびフォーマット) するサーバー側ライブラリです。src属性とすべてのプロパティを削除しbackgroundます。

于 2012-04-14T13:53:35.157 に答える
1

tkone が述べたように: おそらく JavaScript / jQuery が答えです。

これにより、プレビュー エリア内のすべての画像が表示され、ソースがプレースホルダー画像に変更されます。「プレースホルダー」クラスは、背景画像もプレースホルダーに設定します

jQuery

$("#previewArea img").each(function(){
  $(this).attr("src","placeholder.jpg");
  $(this).addClass("hideBG");
});

CSS

.hideBG{
  background: url("placeholder.jpg");
}

テストされていませんが、セットアップとニーズに応じて動作するはずです。

于 2012-04-12T04:12:01.380 に答える
0

「src」属性を処理しないタグを使用して、変更を元に戻せるようにする最善の方法だと思います。

例：すべての「img」を「br」で変更

そのため、フィルタリングされた HTML を 1 番目に出力して ajax で反転し、src 属性を持つすべての br を検索します。

于 2012-04-13T18:38:34.127 に答える
0

クライアント側でも常にこれを行うことができます。

この架空のコードを使用すると、最新のブラウザーがすべて同じように動作するふりをして、次のようなことができるはずです (または jQuery などを使用します)。

var email;
var xhr = new XMLHttpRequest();
xhr.open('GET', URL_FOR_EMAIL, true);
xhr.onreadystatechange = function(event){
   if(xhr.readyState === 4 && xhr.status === 200){
        email = HTMLParser(xhr.responseText);
   }
}

var imgs = email.getElementsByTagName('img');
for(var i = 0; i > imgs.length; i++){
    email.removeChild(imgs[i]);
}

// attach the email body to the DOM
// do something with the images

MDNの HTMLParser

function HTMLParser(aHTMLString){
  var html = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", null),
    body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
  html.documentElement.appendChild(body);

  body.appendChild(Components.classes["@mozilla.org/feed-unescapehtml;1"]
    .getService(Components.interfaces.nsIScriptableUnescapeHTML)
    .parseFragment(aHTMLString, false, null, body));

  return body;
},
于 2012-04-10T13:09:54.903 に答える