WYSIWYGエディターのHTMLをクリーンなMarkdownに変換 — 6エディター対応
リッチテキストエディターは、独自のクラス、データ属性、インラインスタイル、ラッパー要素など、エディター固有のマークアップで満たされたHTMLを生成します。このHTMLは特定のエディターとCMSに依存しています。Markdownはその逆です:あらゆるプラットフォームで移植可能なプレーンテキスト形式で、生の形式で読みやすく、バージョン管理(Git差分がクリーンで意味のあるもの)と完璧に連携します。
開発者とコンテンツチームがMarkdownに移行する理由は3つあります:移植性(再フォーマットなしでプラットフォーム間を移動できる)、開発者体験(同じエディターでコードと一緒にドキュメントを作成できる)、将来性(2004年のMarkdownが今日も完璧にレンダリングされる一方、2018年のエディターに依存したHTMLはそうとは限らない)。
| エディター | 使用者 | HTMLの癖 | 移行難易度 |
|---|---|---|---|
| TinyMCE | WordPress Classic, Joomla, Drupal | mce-* クラス、data-mce-* 属性、<p>でコンテンツをラップ | 容易 |
| CKEditor 4/5 | Drupal, Magento, カスタムアプリ | cke_* クラス、<figure> 画像ラッパー、<oembed> 埋め込み | 容易〜中程度 |
| Quill | モダンWebアプリ、Notion風エディター | ql-* クラス、.ql-indent-N、.ql-align-*、書式用のネストされた<span> | 中程度 |
| WordPress Gutenberg | WordPress 5.0+ | <!-- wp:paragraph --> コメント、wp-block-* クラス、has-* ユーティリティクラス | 中程度 |
| UEditor (Baidu) | 中国のCMS、エンタープライズアプリ | list-paddingleft-* クラス、_src カスタム属性、style タグ除去 | 容易 |
ステップ1 — エクスポート。現在のCMSまたはエディターからHTMLコンテンツを抽出します。WordPressの場合はネイティブのエクスポートツールを使用します。カスタムアプリの場合はデータベースに直接クエリを実行します。生のHTMLファイルを保存します — まだ何も変更しないでください。
ステップ2 — 選択と変換。上のドロップダウンからエディターを選択して、エディター固有のクリーンアップルールを有効にします。各記事のHTMLを貼り付け、Markdown出力をコピーします。コンバーターがmce-*、cke_*、ql-*、wp-block-*クラスを自動的に除去します。
ステップ3 — 検証。変換されたMarkdownをスポットチェックします。画像は構文を使用する必要があります。リストは一貫したインデントを持つべきです。コードブロックはフェンス```区切り文字を使用する必要があります。テーブルはMarkdownプレビューで正しくレンダリングされる必要があります。
ステップ4 — インポート。.mdファイルを静的サイトジェネレーター(Hugo、Jekyll、Astro、Next.js、VitePress)にドロップします。各ファイルの先頭にタイトル、日付、タグ用のフロントマターを追加します。
Markdownが常に正しい選択とは限りません。コンテンツが複雑なテーブルレイアウト(colspan/rowspan)、カスタムHTML埋め込み、または正確なインラインスタイリングに依存している場合、変換は忠実度を失います。これらのケースでは、HTMLを保持し、Markdownとともに生のHTMLをレンダリングするCMSを使用してください — ほとんどの静的サイトジェネレーターは両方をサポートしています。
ドロップダウンからエディタータイプを選択し、エディターのソース/HTMLビューに切り替え、生のHTMLをコピーしてここに貼り付けてください。コンバーターがエディター固有のマークアップ(TinyMCEのmce-*、CKEditorのcke_*、Quillのql-*、WordPressブロックコメント、UEditorパディングクラス)を除去し、クリーンなMarkdownを出力します。
TinyMCE、CKEditor 4/5、Quill、WordPressブロックエディター(Gutenberg)およびクラシックエディター、UEditor(Baidu)、および汎用/不明なHTML。それぞれに調整済みのクリーンアップルールがあります。お使いのエディターがリストにない場合でも、「汎用HTML」で標準的なTurndown.js変換による良好な結果が得られます。
はい。エディタードロップダウンから「WordPress」を選択してください。コンバーターが<!-- wp:... -->ブロックコメント、wp-block-*クラス、GutenbergとClassic Editorの両方の出力からのインラインスタイルを除去します。生成されたMarkdownはHugo、Jekyll、Astroなどの静的サイトジェネレーターで直接使用できます。
ドロップダウンから正しいエディターを選択していることを確認してください。各エディターには特定のクリーンアップルールがあります。「汎用HTML」を選択すると、エディター固有のクリーンアップは適用されません。実際のエディターに切り替えると、コンバーターがその独自のマークアップを除去します。
Pandocは強力なコマンドラインツールですが、エディター固有のマークアップに関する知識がなく、TinyMCEのmce-itemクラスやQuillのql-indent属性を除去できません。このツールはHTMLからMarkdownへの変換前にエディター認識の前処理を追加し、セットアップ不要でブラウザ内で動作します。
画像は構文に変換され、元のsrcとalt属性が保持されます。埋め込みメディア(oEmbed、iframe)はメディアURLを指すMarkdownリンクに変換されます。移行後、一時的なURLやCDN URLを最終的な画像パスに手動で置き換える必要がある場合があります。