ビジュアルエディターと HTML ソース表示で内容を編集する方法

リッチテキスト編集と HTML ソース表示を切り替えて使えるワークベンチです。ビジュアルエディターで入力・整形し、マークアップを直接編集したいときはソース表示に切り替えます。プレビューで現在の内容を確認でき、最後はソース表示から HTML をコピーします。

エディターはこのタブ内だけで動作します。内容は送信されず、保存ボタンもないため、残したい場合はページを閉じる前にソースをコピーしてください。

  1. 編集エリアをクリックし、テキストまたは他のページからコピーしたマークアップを入力・貼り付けます。
  2. ツールバーで整形します: 太字、斜体、見出し、リスト、配置、リンク、表、URL による画像挿入など。
  3. ソースボタンを押すと同じ内容が HTML 表示になり、タグや属性をテキストとして編集できます。
  4. プレビューで内容をダイアログに表示したり、HTML のクリーンアップや自動整形でスタイル除去・再整形を行えます。
  5. ソース表示から HTML をコピーします。ページ側では何も保存されません。

エディターが内容に対して行うこと

ツールバーとダイアログ

ツールバーには元に戻す・やり直す、太字、斜体、下線、取り消し線、見出し H1〜H4、フォントと文字サイズ、文字色と背景色、配置、番号付き・箇条書きリスト、インデント、下付き・上付き文字、行の高さ、リンク、画像、セルの結合・分割ができる表、水平線、顔文字、アンカー、改ページがあります。

画像・メディア・Flash のダイアログは URL からの挿入のみです。このページではファイルのアップロードが無効になっています。コードブロックは lang-js のような言語クラス付きの pre 要素として挿入され、シンタックスハイライターは読み込まれません。

ソース表示とマークアップの正規化

ソース表示とビジュアルエディターは同じ文書の 2 つの表示であり、切り替えるとマークアップが再描画されます。その際に正規化も行われ、たとえば水平線は自己終了タグで戻り、インライン style には末尾のセミコロンが付き、表には tbody が追加されます。

そのため、ビジュアルエディターを経由した往復は入力したソースとバイト単位で同じにはなりません。正確なバイト列が必要な場合は元のマークアップを別に保管し、タグの直接編集にはソース表示を使います。

処理・プライバシー・制限

処理はすべてブラウザーのタブ内で行われます。内容が送信されることはなく、ページを読み込んだ後はオフラインでも動作し、保存・公開ボタンもありません。文書はタブを閉じるまでしか存在しません。

一般的な Web コンテンツ向けのエディターです。非常に大きな文書では編集エリアの動作が重くなることがあり、貼り付けた内容は「HTML のクリーンアップ」で除去しない限り元のスタイルを保持します。

最近使ったツール: