リッチテキスト → Markdown 変換

WYSIWYGエディターのHTMLをクリーンなMarkdownに変換 — 6エディター対応

← 変換ツールに戻る
汎用

リッチテキスト HTML 入力

WYSIWYGエディターのソースビューから生のHTMLを貼り付けてください

Markdown 出力 0 文字

WYSIWYGからMarkdownに移行する理由

リッチテキストエディターは、独自のクラス、データ属性、インラインスタイル、ラッパー要素など、エディター固有のマークアップで満たされたHTMLを生成します。このHTMLは特定のエディターとCMSに依存しています。Markdownはその逆です:あらゆるプラットフォームで移植可能なプレーンテキスト形式で、生の形式で読みやすく、バージョン管理(Git差分がクリーンで意味のあるもの)と完璧に連携します。

開発者とコンテンツチームがMarkdownに移行する理由は3つあります:移植性(再フォーマットなしでプラットフォーム間を移動できる)、開発者体験(同じエディターでコードと一緒にドキュメントを作成できる)、将来性(2004年のMarkdownが今日も完璧にレンダリングされる一方、2018年のエディターに依存したHTMLはそうとは限らない)。

WYSIWYGエディター比較

エディター使用者HTMLの癖移行難易度
TinyMCEWordPress Classic, Joomla, Drupalmce-* クラス、data-mce-* 属性、<p>でコンテンツをラップ容易
CKEditor 4/5Drupal, Magento, カスタムアプリcke_* クラス、<figure> 画像ラッパー、<oembed> 埋め込み容易〜中程度
QuillモダンWebアプリ、Notion風エディターql-* クラス、.ql-indent-N.ql-align-*、書式用のネストされた<span>中程度
WordPress GutenbergWordPress 5.0+<!-- wp:paragraph --> コメント、wp-block-* クラス、has-* ユーティリティクラス中程度
UEditor (Baidu)中国のCMS、エンタープライズアプリlist-paddingleft-* クラス、_src カスタム属性、style タグ除去容易

移行ガイド:リッチテキストからMarkdownへの4ステップ

ステップ1 — エクスポート。現在のCMSまたはエディターからHTMLコンテンツを抽出します。WordPressの場合はネイティブのエクスポートツールを使用します。カスタムアプリの場合はデータベースに直接クエリを実行します。生のHTMLファイルを保存します — まだ何も変更しないでください。

ステップ2 — 選択と変換。上のドロップダウンからエディターを選択して、エディター固有のクリーンアップルールを有効にします。各記事のHTMLを貼り付け、Markdown出力をコピーします。コンバーターがmce-*cke_*ql-*wp-block-*クラスを自動的に除去します。

ステップ3 — 検証。変換されたMarkdownをスポットチェックします。画像は![代替テキスト](url)構文を使用する必要があります。リストは一貫したインデントを持つべきです。コードブロックはフェンス```区切り文字を使用する必要があります。テーブルはMarkdownプレビューで正しくレンダリングされる必要があります。

ステップ4 — インポート。.mdファイルを静的サイトジェネレーター(Hugo、Jekyll、Astro、Next.js、VitePress)にドロップします。各ファイルの先頭にタイトル、日付、タグ用のフロントマターを追加します。

変換すべきでない場合

Markdownが常に正しい選択とは限りません。コンテンツが複雑なテーブルレイアウト(colspan/rowspan)、カスタムHTML埋め込み、または正確なインラインスタイリングに依存している場合、変換は忠実度を失います。これらのケースでは、HTMLを保持し、Markdownとともに生のHTMLをレンダリングするCMSを使用してください — ほとんどの静的サイトジェネレーターは両方をサポートしています。

よくある質問

WYSIWYGエディターのリッチテキストをMarkdownに変換するにはどうすればよいですか?

ドロップダウンからエディタータイプを選択し、エディターのソース/HTMLビューに切り替え、生のHTMLをコピーしてここに貼り付けてください。コンバーターがエディター固有のマークアップ(TinyMCEのmce-*、CKEditorのcke_*、Quillのql-*、WordPressブロックコメント、UEditorパディングクラス)を除去し、クリーンなMarkdownを出力します。

どのWYSIWYGエディターがサポートされていますか?

TinyMCE、CKEditor 4/5、Quill、WordPressブロックエディター(Gutenberg)およびクラシックエディター、UEditor(Baidu)、および汎用/不明なHTML。それぞれに調整済みのクリーンアップルールがあります。お使いのエディターがリストにない場合でも、「汎用HTML」で標準的なTurndown.js変換による良好な結果が得られます。

WordPressのブログ投稿をMarkdownに移行できますか?

はい。エディタードロップダウンから「WordPress」を選択してください。コンバーターが<!-- wp:... -->ブロックコメント、wp-block-*クラス、GutenbergとClassic Editorの両方の出力からのインラインスタイルを除去します。生成されたMarkdownはHugo、Jekyll、Astroなどの静的サイトジェネレーターで直接使用できます。

出力にCSSクラスが残っているのはなぜですか?

ドロップダウンから正しいエディターを選択していることを確認してください。各エディターには特定のクリーンアップルールがあります。「汎用HTML」を選択すると、エディター固有のクリーンアップは適用されません。実際のエディターに切り替えると、コンバーターがその独自のマークアップを除去します。

WYSIWYG変換においてPandocより優れていますか?

Pandocは強力なコマンドラインツールですが、エディター固有のマークアップに関する知識がなく、TinyMCEのmce-itemクラスやQuillのql-indent属性を除去できません。このツールはHTMLからMarkdownへの変換前にエディター認識の前処理を追加し、セットアップ不要でブラウザ内で動作します。

画像と埋め込みメディアはどうなりますか?

画像は![代替テキスト](url)構文に変換され、元のsrcalt属性が保持されます。埋め込みメディア(oEmbed、iframe)はメディアURLを指すMarkdownリンクに変換されます。移行後、一時的なURLやCDN URLを最終的な画像パスに手動で置き換える必要がある場合があります。