Gói chính thức · Framework

Trình soạn thảo văn bản định dạng cộng tác cho Filament

Một trường văn bản định dạng cho nhiều người cùng gõ một lúc, như Google Docs: thay đổi tự gộp lại, có con trỏ trực tiếp và avatar của những người đang sửa. Giá trị là HTML như RichEditor, và bản ghi vẫn lưu bằng nút Lưu như thường.

  • Xây trên Yjs và TipTap: không cần khóa, không có lỗi "người khác đã lưu bản ghi này".
  • Thay đổi được lưu vào cơ sở dữ liệu của bạn trong lúc mọi người gõ, nên ai mở trang sau, hoặc quay lại sau khi mất kết nối, đều tiếp tục từ chỗ mọi người đang ở.
  • Filament 3, 4 và 5, bằng tiếng Anh, Trung phồn thể, Trung giản thể, Nhật, Hàn, Thái và Việt.
Ba người cùng sửa một bài viết: mỗi người có con trỏ ghi tên, và ảnh đại diện của họ hiện phía trên ô nhập.
Ba người cùng sửa một bài viết: mỗi người có con trỏ ghi tên, và ảnh đại diện của họ hiện phía trên ô nhập.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

  1. Cài đặt

    composer require hibira-io/filament-collab
    php artisan hibira:install
    php artisan migrate
  2. Thiết lập

    use Hibira\Filament\HibiraPlugin;
    use Hibira\FilamentCollab\HibiraCollabPlugin;
    
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->plugins([
                HibiraPlugin::make(),
                HibiraCollabPlugin::make(),
            ]);
    }
  3. Sử dụng

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

Trước khi bắt đầu

  • Secret của ứng dụng chỉ hiện một lần, khi bạn tạo ứng dụng hoặc xoay vòng secret. Hãy giữ nó trên máy chủ, không bao giờ đưa vào trình duyệt hay bản build game.
  • Bật "Cho phép sự kiện phía client" trong cài đặt ứng dụng: con trỏ đi giữa các trình duyệt dưới dạng sự kiện client; bản thân văn bản không cần.
  • HTML của trường đến từ trình duyệt: làm sạch nó trước khi hiển thị cho người khác, ví dụ bằng sanitizeHtml().

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →