Spatie Filament Markdown Editor 安装与配置指南

1. 项目基础介绍

Spatie Filament Markdown Editor 是一个基于 PHP 的 Markdown 编辑器，它为 Laravel Filament 开发者提供了一个带有代码高亮和图片上传功能的 Markdown 字段。这个编辑器利用 EasyMDE 实现，易于集成到任何 Filament 表单中。

2. 项目使用的关键技术和框架

• PHP: 作为后端语言，PHP 是 Laravel 框架的基础。
• Laravel Filament: 是一个基于 Laravel 的后台 UI 库，用于快速构建优雅的管理界面。
• EasyMDE: 是一个基于 Markdown 的编辑器，提供语法高亮和实时预览功能。
• JavaScript: 用于实现编辑器的交互功能。

3. 项目安装和配置的准备工作

在开始安装之前，请确保您已经满足以下条件：

• 安装了 PHP。
• 安装了 Laravel 和 Filament。
• 安装了 Node.js 和 npm，用于编译前端资源。
• 确保您的项目可以正常运行 composer 和 npm 命令。

安装步骤

1. 通过 Composer 安装

   打开终端，切换到您的项目目录，运行以下命令来安装 Spatie Filament Markdown Editor：

   composer require spatie/filament-markdown-editor
   

2. 发布前端资源

   安装完成后，您需要发布前端资源。执行以下命令：

   php artisan vendor:publish --provider="Spatie\FilamentMarkdownEditor\FilamentMarkdownEditorServiceProvider"
   

   这条命令将把编辑器的前端资源发布到您的 public 目录。

3. 注册编辑器

   在您的 Filament 资源中，注册 Markdown 编辑器字段。例如，如果您有一个名为 Post 的资源，您可以在其 form 方法中添加以下代码：

   use Spatie\FilamentMarkdownEditor\MarkdownEditor;
   
   public static function form(Form $form): Form
   {
       return $form->schema([
           // 其他字段...
           MarkdownEditor::make('content')
               ->fileAttachmentsDisk('local')
               ->fileAttachmentsVisibility('private')
               ->required(),
       ]);
   }
   

   这将创建一个名为 content 的 Markdown 编辑器字段。

4. 配置图片上传（可选）

   如果您需要配置图片上传，请确保您的服务器已经配置了适当的大小和权限，并且在 MarkdownEditor 字段中指定了正确的磁盘和可见性设置。

5. 测试安装

   最后，启动您的 Laravel 应用并访问相关页面，检查 Markdown 编辑器是否正常工作。

以上就是 Spatie Filament Markdown Editor 的安装和配置指南。按照这些步骤操作后，您应该可以在您的 Laravel Filament 应用中成功使用 Markdown 编辑器。