HTML WYSIWYGエディター
インストール不要の無料オンラインHTMLビジュアルエディター。ライブプレビュー機能付きのWYSIWYGエディター
HTML エディターについて
ブラウザーの contentEditable および document.execCommand API に基づいて構築された WYSIWYG エディターです。編集可能な領域に入力し、ツールバーで書式設定を行うと、基になる HTML が下のコードテキストエリアと同期されます。出力はブラウザーが生成するものをそのまま反映するため、マークアップが手書きの HTML とは異なる場合があります。
使い方
1. 編集領域をクリックして、テキストを入力または選択します 2. ツールバーのボタン（B、I、U、S、リスト、配置、H1/H2/P）を使って書式を適用します 3. リンクボタンをクリックし、URL ダイアログでハイパーリンクを挿入します 4. コードテキストエリアで HTML を直接編集すると、プレビューが逆方向に更新されます 5. コピーをクリックすると、現在の HTML がクリップボードにコピーされます
ツールバーのアクション
利用可能なアクション: 太字、斜体、下線、取り消し線。順序なしリストと順序付きリスト。左/中央/右揃え。H1、H2、段落ブロックの書式設定。リンクの挿入（URL の入力を求められます）。水平線の挿入。画像のアップロード、表の挿入、ソースのクリーンアップ、出力の HTML サニタイズは行われません。
▶生成された HTML が乱雑に見えるのはなぜですか？
このエディターは document.execCommand を使用しており、ブラウザー固有のマークアップ（多くの場合 <span style="font-weight: bold"> のようなインラインスタイル属性）が生成されます。公開する前に、コードテキストエリアやフォーマッターで整理してください。
▶画像や表を挿入できますか？
いいえ。ツールバーはテキストの書式設定、リスト、配置、見出し、リンク、水平線のみをサポートしています。表には専用の HTML 表ジェネレーターツールをご使用ください。
▶コードテキストエリアの編集はプレビューに反映されますか？
はい。コードテキストエリアに入力すると編集領域が再レンダリングされ、エディターでの変更もテキストエリアを更新します。両者の間でフィードバックループが発生しないようガードが設けられています。
▶document.execCommand は非推奨ですか？
はい。execCommand は仕様では廃止扱いですが、現在のすべてのブラウザーで引き続き機能します。新規開発のエディターには最新のライブラリの使用を検討してください。本ツールはシンプルさを保つために従来の手法を採用しています。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。