HTML ワイジウィグエディター

WYSIWYG エディターとは

WYSIWYG は「見たままが得られる」の意味です。生の HTML タグを打つのではなく、 文書を視覚的に編集し（太字、斜体、見出し、リスト、リンクなど）、エディターが 操作をマークアップに変換します。このページはブラウザ標準の contenteditable と document.execCommand API を使用しています。この API は 10 年以上すべての 主要ブラウザに搭載されています。サードパーティ製ライブラリは使っておらず、 書式はブラウザがネイティブに適用するため、生成される HTML はブラウザが他の 編集領域で生成するものと正確に一致します。

ツールバーでできること

ツールバーは多くの人が必要とする操作を網羅しています：元に戻す/やり直し、 太字、斜体、下線、取り消し線、見出し H1-H3、段落、コードブロック、箇条書きと 番号リスト、引用、リンク、書式の全削除。フォントとサイズの選択は現在の選択 範囲の書体とフォントサイズを変更します。ソース切替はレンダリング表示と、 直接編集できる生 HTML を含むテキストエリアを切り替えます。エディター下の 統計行は現在のコンテンツの文字数と単語数を表示します。

HTML 出力の構造

エディターは可能な限り見た目だけのマークアップではなく意味論的なマーク アップを生成します：見出しは <h1>/<h2>/<h3>、リストは <ul>/<ol>/<li>、引用は <blockquote>、コードは <pre> になります。テキストレベルの書式は <strong>、 <em>、<u>、<del> で適用されます。エンジンがブラウザの execCommand のため、 ブラウザ間で正確なマークアップは若干異なることがあります--太字クリックが あるブラウザでは <strong>、別のブラウザでは <b> を生成します。最大限の互換性 のため、エクスポートされる HTML は意図的に最小限で、余計なクリーニングなしに メール、CMS エディター、ドキュメントシステムへ貼り付けられます。

実用的なヒント

ソース表示に切り替えて出力欄から HTML をコピーするか、「HTML をコピー」 ボタンを使います。メールクライアントに貼り付ける際はマークアップをシンプルに 保ちましょう。多くのクライアントは <style> や複雑な入れ子を除去します。すでに スタイルを持つページに埋め込む場合は、意味論的タグを優先しインラインスタイル を避けてください。エクスポートされるマークアップはインラインスタイルを 使わないため、ページの CSS を自然に継承します。このページはすべてブラウザ内で ローカル動作し、コンテンツがページの外に出ることはありません。