官方包 · 框架

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 完全相同。 免费创建账号 →