メール用 HTML

文書をメールクライアントでも表示できる HTML に変換します。メールクライアントは <style> ブロック、外部スタイルシート、クラス名を削除するため、editor.getEmailHTML() は各要素の外観をインラインの style 属性にコピーし、class と id を削除して、全体を中央揃えの固定幅テーブルで囲みます。

Export email HTML ダイアログ。プレゼンテーション用テーブルで始まるインラインスタイル付き HTML の読み取り専用テキストボックス、Ready to copy 3095 characters というメッセージ、Copy と Close ボタンが表示されています — Email HTML ボタンを押すと、インラインスタイルを付けた HTML をすぐコピーできるエクスポートダイアログが開きます。

スタイルシートなしの描画を並べた比較。左の getHTMLCode 出力はブラウザー既定の Times フォントと装飾のないテキストで、右の getEmailHTML 出力はシステムフォント、大きな灰色の導入段落、斜体の引用、黄色の New バッジを保持しています — 同じ文書をスタイルシートなしで描画したものです。左は `getHTMLCode()`、右は `getEmailHTML()` です。引用の左枠線は失われています。「注意点」を参照してください。

有効にする

この機能は emailtoolkit.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。メソッド editor.getEmailHTML() とコマンド emailexport（「Email HTML」）を追加します。ボタンは既定のツールバーの「more」パネルにあり、スラッシュメニューでは「Export email HTML」と表示されます。独自のツールバーには次のように追加します。

<div id="editor"><h2>October news</h2><p class="lede">Three things changed this month.</p>…</div>
<script>
var editor = new RichTextEditor("#editor", {
  contentCssUrl: "site.css",
  toolbar_default: "{bold,italic,underline}|{paragraphs}|{emailexport}"
});
// Send this to your mail service:
var html = editor.getEmailHTML({ width: 600 });
</script>

オプション

オプション	既定値	動作
`emailInlineProperties`	`color`、`background-color`、`font-family`、`font-size`、`font-weight`、`font-style`、`text-decoration`、`text-align`、`line-height`、四方向の `margin-` と `padding-`、`border`、`border-radius`、`vertical-align`、`list-style-type`、`width`	各要素にコピーする CSS プロパティです。この一覧のプロパティだけをコピーします。
`emailWrapWidth`	`640`	外側のテーブルの幅（ピクセル）です。

getEmailHTML(options) に { wrap: false } を渡すと、テーブルで囲まずインラインスタイル付きの内容を返します。{ width: 600 } を渡すと、その呼び出しでのみ emailWrapWidth を上書きします。

出力される内容

一覧の各プロパティの計算値を各要素に付けます。ただし、既定値（normal、none、0px、透明な背景、ウェイト 400、左揃えまたは開始位置揃え、ベースライン）は除外します。width はテーブル、セル、画像にのみ、list-style-type はリストにのみ出力します。上記の実行での getEmailHTML({ wrap: false }) の先頭は次のとおりです。

<h2 style="color:rgb(17, 20, 24);font-family:system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;font-size:24px;font-weight:600;line-height:30px;margin-bottom:14.4px">October news</h2><p style="color:rgb(51, 65, 85);font-family:system-ui, …;font-size:20px;line-height:34px;margin-bottom:20px">Three things changed this month.</p>

class="lede" と見出しの id はなくなっています。先頭段落の 20px の灰色の文字は、クラスから取得したものです。リンクの href、画像の src と alt は保持します。script、style、link、meta 要素は削除します。既定のラッパーを使う場合、内容は次の中に配置されます。

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tr><td align="center" style="padding:0"><table role="presentation" width="600" cellpadding="0" cellspacing="0" style="border-collapse:collapse;max-width:600px;width:100%"><tr><td style="padding:16px;font-family:Arial,Helvetica,sans-serif">…</td></tr></table></td></tr></table>

ダイアログには、ラッパーを含む HTML 全体が読み取り専用テキストボックスに表示され、そこにフォーカスが移ります。文字数（「Ready to copy 3095 characters.」）、クリップボードに書き込む Copy、および Close も表示されます。

注意点

一覧にないプロパティは失われます。上記の引用には、クラスから border-left: 4px solid が適用されていました。辺ごとに値が異なると border には単一の値がないため、このルールは反映されませんでした。必要なプロパティを追加してください。emailInlineProperties: ["color", "border-left", "padding-left", "font-style"] を指定すると、引用は <blockquote style="color:rgb(87, 96, 106);border-left:4px solid rgb(37, 99, 235);padding-left:12px;font-style:italic"> と出力されました。追加したプロパティには既定値の除外が適用されないため、ほかの要素にも border-left:0px none のように出力されます。
スタイルは表示中のエディターから読み取ります。クラスの外観はコンテンツ用スタイルシート（contentCssUrl）で決まるため、メールに適用したい CSS を読み込んでください。フォントには計算済みのフォントスタック全体を使います。
実際の文書 DOM から生成するため、タグが getHTMLCode() と異なることがあります。<strong> として入力した太字は、この出力では <strong> のままですが、getHTMLCode() は <b> を返しました。
差し込みフィールドのプレビューが有効な場合、メールにはサンプルデータではなく、テンプレートのフィールドを使います。
出力はどこにも保存されず、文書自体も変わりません。画像の URL は記述どおり保持するため、メールでは絶対 URL を使ってください。

関連情報：メールキャンペーンのデモ、HTML の取得。