Filament 3 RichEditor：如何实现工具栏固定（Sticky）效果？

最简单的实现方式是通过自定义CSS设置工具栏的粘性定位，具体步骤如下：

• 找到项目中用于自定义样式的CSS文件（比如resources/css/app.css），添加以下样式：

/* 固定RichEditor工具栏，适配Filament顶部导航栏 */
.filament-forms-rich-editor-component .ProseMirror-menubar {
    position: sticky;
    top: 64px; /* 对应Filament默认顶部导航栏高度，可根据实际布局调整 */
    z-index: 10;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

• 如果该CSS文件未被Filament加载，需要在面板提供者（比如app/Providers/Filament/AdminPanelProvider.php）中注册：

public function boot(): void
{
    parent::boot();

    Filament::registerStyles([
        asset('css/app.css'),
    ]);
}

若使用Vite编译资源，确保在resources/css/app.css中引入该样式，且Vite配置正确，之后通过@vite('resources/css/app.css')在Filament布局中加载即可。

完成配置后刷新页面，编辑长文本时工具栏会固定在顶部，跟随滚动操作，无需返回顶部即可使用编辑功能。

内容的提问来源于stack exchange，提问作者Kornel