官方套件 · 框架

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()。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。 免費建立帳號 →