公式パッケージ · フレームワーク

Filament の共同編集リッチテキストエディター

Google ドキュメントのように複数人が同時に入力できるリッチテキスト項目です。変更は自動で統合され、リアルタイムのカーソルと編集中の人のアバターが表示されます。値は RichEditor と同じ HTML で、レコードはいつもどおり「保存」ボタンで保存します。

hibira-io/filament-collabPackagist ↗GitHub ↗

• Yjs と TipTap で構築。ロックも「ほかの人がこのレコードを保存しました」というエラーもありません。
• 入力と同時に変更がデータベースに保存されるので、あとからページを開いた人や接続が切れて戻ってきた人も、みんなの最新の状態から続けられます。
• Filament 3、4、5 に対応。英語、繁体字中国語、簡体字中国語、日本語、韓国語、タイ語、ベトナム語で使えます。

サインインすると、コード例にご自身のクラスターホストが入ります。 サインイン

1. インストール

   composer require hibira-io/filament-collab
   php artisan hibira:install
   php artisan migrate

2. 設定する

   use Hibira\Filament\HibiraPlugin;
   use Hibira\FilamentCollab\HibiraCollabPlugin;
   
   public function panel(Panel $panel): Panel
   {
       return $panel
           ->plugins([
               HibiraPlugin::make(),
               HibiraCollabPlugin::make(),
           ]);
   }

3. 使う

   use Hibira\FilamentCollab\Forms\Components\CollaborativeEditor;
   
   CollaborativeEditor::make('body')
       ->placeholder('Write the announcement…')
       ->columnSpanFull(),

始める前に

• アプリのシークレットは、アプリの作成時とシークレットのローテーション時に一度だけ表示されます。サーバーにだけ置き、ブラウザやゲームのビルドには入れないでください。
• アプリの設定で「クライアントイベントを許可」をオンにしてください。カーソルはクライアントイベントとしてブラウザー間を移動します。テキスト自体には不要です。
• 項目の HTML はブラウザーから届きます。ほかの人に表示する前に、sanitizeHtml() などで無害化してください。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 無料でアカウントを作成 →