共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions. Built with Tiptap, OpenAI, and Vercel AI SDK.
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを簡単に作成できる「Tiptap」を使って実際に共同編集してみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「Tiptap」です。同様のツールキットとして「ProseMirror」が存在していますが、高性能で自由度が高い分だけ構築の難易度も高かったProseMirrorに対して、より簡単に使用できるように構築されたラッパーがTiptapというわけ。Tiptap開発元のバックエンドサービスを使用することで簡単に共同編集機能を導入できるとのことなので、実際に共同編集できるエディタを組み上げてみました。 Dev toolkit for building collaborative editors – Tiptap https://tiptap.dev/ Tiptapを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した
今回は、Advanced Custom Fields（アドバンス カスタムフィールド）のテキストエリアに 「リンクの付け外しだけ」を追加したい！」 を WYSIWYG エディター を使って実現します。 ただ、カスタムフィールドの WYSIWYGエディター を使うと、触られたくない無駄なツールがたくさんありますよね。 そこで、ツールバーに表示する機能を制限すれば良いというわけです。 デフォルトのWYSIWYGには「Full」と「Basic」がある カスタムフィールドの WYSIWYGエディターを作成することで、2つの標準メニュー（「Full」と「Basic」）が表示されるようになっています。 それぞれのツールバーを見ていきましょう。 WYSIWYGの「Full」 WYSIWYGの「Basic」 WYSIWYGエディターのツールバーを任意の機能のみ表示する では、ここから無駄なツールを取り除い
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Novel - Notion-style WYSIWYG editor with AI-powered autocompletions
ACFのWYSIWYGエディターをリンクの付け外しだけにするカスタマイズ - Qiita