공식 패키지 · 프레임워크

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와 똑같이 동작합니다. 무료 계정 만들기 →