FeatherCMS

markdownWysiwyg紹介

📝 markdown-wysiwyg-editor — Markdown と視覚的編集を融合したエディタ

npm github

markdown-wysiwyg-editor は、Markdown と WYSIWYG 表現をシームレスに行き来できる JavaScript エディタ で、視覚的な編集と生の Markdown コード編集の両方をサポートするコンポーネントです。

🔍 何ができる？

このパッケージの最大の特徴は、「見た目で編集するモード（WYSIWYG）」と「生の Markdown 編集モード」 を切り替えられる点です。 ユーザーは視覚的なインターフェースで文章を書きながら、Markdown 形式でもテキストを扱うことができるため、両方の利点を活かせます。

基本的な特徴は以下の通りです：

✅ Dual-Mode（2つの編集モード）

  • Visual（WYSIWYG）モード

→ ドキュメントの見た目に近い形で編集が可能

  • Markdown モード

→ 生の Markdown 文法での入力／編集が可能

これにより、ビジュアル優先のユーザーと Markdown 愛好者の両方に対応できます。

✅ ツールバーとスマートな変換

  • エディタ上には太字・見出しなどの Markdown に対応したツールバーが表示されます。
  • HTML 要素と Markdown の相互変換処理を含むため、WYSIWYG モードから Markdown への変換もスマートに行います。

✅ 軽量＆導入が簡単

  • npm / CDN を使って簡単に導入可能
  • シンプルな UI とスタイルを備え、最小限の設定で使い始められる設計です。

🧠 なぜ “Markdown × WYSIWYG” が強いのか？

Markdown はシンプルで書きやすい一方で、書式の結果が視覚的に把握しにくいという課題があります。 一方で WYSIWYG 編集は「見たまま」に強いですが、生成される内部構造とのズレが出ることがあります。([Japan IT Guide][3])

markdown-wysiwyg-editor はこの 中間を埋めるアプローチ を提供します：

✅ WYSIWYG モードで視覚優先に編集 ✅ 必要に応じて Markdown モードで生の文法編集 → コンテンツ制作のフローを柔軟に変えられるというメリットがあります。

📦 インストール（例）

npm からインストールする場合：

npm install @celsowm/markdown-wysiwyg

CDN 版を使う場合：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@celsowm/markdown-wysiwyg/dist/editor.min.css">
<script src="https://cdn.jsdelivr.net/npm/@celsowm/markdown-wysiwyg@latest/dist/editor.js"></script>

※ 最新バージョン等は npm や公式リポジトリでご確認ください

🛠️ こんなシーンで使える！

  • ブログやドキュメントページの執筆 UI
  • ユーザーが Markdown 記法に不慣れなサービスでのコンテンツ生成
  • Markdown と視覚編集の両方の UX を提供する管理画面
  • リッチテキスト編集に加えて Markdown のまま保存したいケース

🧾 まとめ

markdown-wysiwyg-editor は、視覚編集と Markdown を両立させたエディタライブラリ です。 一見相反する 2 つの表現方法をうまく結び付けることで、コンテンツ制作の柔軟性を高めます。 Markdown をベースに扱いながら、ユーザー体験を損なわずに直感的な編集を提供したい開発者にぴったりのツールです。