KuroEditor も作る必要があったとは（涙）vol.1
product Technology OSS

KuroEditor も作る必要があったとは（涙）vol.1

誰でも簡単にパソコンいらずでデザイン自由なヘッドレスCMSの開発を始めて、今更気がついた事実。KuroCMSに向いたエディッターが無いみたいですよ？w

あああ、エディッターありませんよ！？

KuroCMSの開発を進めて半分は過ぎていた頃、strapi でもエディッターをまともにするために、大変な苦労と時間を費やした事を思い出し、一瞬頭が真っ白になった黒兎。頭髪が真っ白になっていたらパンダ兎になっていたかもしれません。

しかし、strapi には使えなかったけど、きっと世の中には自分が欲しい仕様のエディッターが見つかるだろうと、調査を始めましたが・・・、見つかりません。え？嘘でしょ、嘘と言ってくれチャッピー！（ChatGPTの意）


MITライセンス限定で探してみる

そもそも、KuroCMSに組み込んで配布することから、やはり組み込めるエディッターもMITライセンスの方が便利に決まってる。

どうやら、調べてみると現在のWebエディタのトレンドも、ロジックだけを借りてUIは自分で作る（ヘッドレス）が完全に主流となっているようです。CMSと一緒ですね。


世界で評判のベスト5


【TipTap】

  1. 圧倒的1位らしい。自由度が極めて高い、React/Vue対応、HTML / JSON
  2. UIを持たないエディタ。ボタンのデザインやツールバーの配置を完全にアプリのUIに合わせられます。ProseMirrorという強力なエンジンをベースにしています。
  3. ユーザ数: GitHub Stars 3.7万+、週次DL 800万超。実質的な世界標準
  4. 組み込み方: npm install @tiptap/react して、useEditor フックでコントロール。


【Editor.js】

  1. 熱狂的ファン多い、Notion風で直感的らしい、プラグイン式、JSON (構造化データ)
  2. 特徴: すべてがブロック（段落、画像、見出し）として扱われる。Notionに近い操作感。
  3. HTMLを出力せずクリーンなJSONを吐くため、Web、モバイルアプリ、スマートウォッチ等で同じデータを表示するのに最適
  4. 組み込み方: 本体と使いたいツール（Image, Header等）を個別に読み込み、new EditorJS() で初期化。


【Lexical】

  1. 急成長中、高速・軽量・堅牢、Meta製、設計重視、HTML / JSON
  2. パフォーマンスとアクセシビリティに特化。非常に動作が軽く、大規模なアプリでも重くなりません。
  3. ユーザ数: 急増中。AI生成コンテンツとの相性が良く、AIエディタへの採用例が多い。
  4. 機能: 高度な状態管理、ツリーベースのデータモデル。WCAG（アクセシビリティ基準）に完全準拠。
  5. 組み込み方: Reactプラグインとして導入。名前付きの「ノード」を定義してエディタを構築。


【Slate】(React専用の最強フレームワーク)

  1. 開発者向け、究極のカスタマイズ、React専用、JSON (任意)
  2. 特徴: エディタというより「エディタを作るためのライブラリ」。ドキュメントモデルを完全に自分で定義可能。
  3. ユーザ数: Reactコミュニティで根強い支持（GitHub Stars 3.1万+）。
  4. 機能: 複雑なネスト構造（表の中にリスト、その中に画像等）を持つドキュメントに強い。
  5. 組み込み方: コンポーネント指向で構築。renderElement などの関数を自作して描画を制御。


【Milkdown】(Markdown特化のWYSIWYG)

  1. 特定用途に強 │ Markdownと視覚操作の両立 │ 低〜中 │ Markdown / HTML │
  2. 特徴: 書いている最中にMarkdownがリアルタイムで装飾される、Typoraのような体験を提供。
  3. ユーザ数: 開発者・技術文書向けに特化。
  4. 機能: プラグインによる強力なMarkdown拡張。数学記号（LaTeX）やダイアグラム（Mermaid）対応。
  5. 組み込み方: TypeScriptで構成され、必要なプラグインを配列で渡して起動。


さてこの５本どうよ。

strapi のエディッターとして、TipTap , Lexical は使ったけど、全然ダメだった・・ Lexcical は画像をまともに対応していないし、TipTap もダメだった。ともかく、黒兎が求めるWYSIWYG（最終的な見た目のままエディッターで編集できるという意味）にどれもが遠い。Editor.js も基本同じ。JSON専用とかWYSIWYGになるわけない。ようするに、文章やコードを只ひたすら入力していくのであれば、きっと良いのかもしれない。Milkdown にいたっては、画像のガの字も出てこない、LaTeXでいいんじゃないの？そして黒兎、本当にReact嫌いなんです。Metaさんすみません（汗。ぎりぎりVue ぐらいかなフレームワーク使うのは、自分はもっぱらAstro一本！そういえば昔アストロ球団という漫画あったな。

結局、strapi で利用している、quill + better-table が結局一番良かった事を思い出してきました。しかし、どうしてもテーブルの実装が納得いかないw、そんな時、心の中の悪魔君が言いました。「そんなに文句言ってんなら自分で作れよ！」、そうですね。その通りです。すみませんでした。


という訳でKuroEditor始めました。

そんな高性能なエディッターが欲しい訳ではない。WYSIWYGがやりたい、テーブルをストレスなく、Dropbox Paper のように使いたいんだよ〜！という心の叫びから結局自分で作る事になりました。そして、黒兎がどんなエディッターを作ったのか詳しくは次の記事にまとめていきます。一応は完成していますが、記事を作っている間にテストして、github 公開プロジェクトの体裁を整えたら公開します。