Textarea 字段来承载这些代码内容。然而，很快我就发现这简直是一场噩梦！想象一下，在一个普通的文本框里编辑几百行的JSON配置，没有任何语法高亮，括号匹配全靠肉眼，更别提自动补全了。一个小小的逗号错误就能导致整个配置失效，而定位问题则需要耗费大量时间。对于PHP和JavaScript代码来说，情况更是糟糕，代码的可读性极差，修改起来战战兢兢，生怕引入新的Bug。
我急切地需要一个解决方案，一个能在FilamentPHP后台提供专业代码编辑体验的组件。它应该具备语法高亮、行号显示、甚至代码自动补全等功能，让代码管理变得像在IDE中一样舒适。
Composer在线学习地址：学习地址
幸好，我很快发现了 creagia/filament-code-field 这个Composer包，它简直是为解决我的问题而生！
立即学习“PHP免费学习笔记（深入）”；
creagia/filament-code-field 是一个专为FilamentPHP管理面板和表单构建器设计的输入字段，它基于强大的 CodeMirror 编辑器。这意味着，你可以在Filament后台拥有一个功能丰富的代码编辑器，支持代码自动补全、明暗主题、多种语言（JSON、PHP、HTML、XML、JavaScript）以及只读模式等高级特性。
如何引入 creagia/filament-code-field？
首先，通过Composer安装这个包。请注意，根据你使用的Filament和Laravel版本，可能需要安装不同的版本：
# 对于 Filament 3 和 Laravel 11+ composer require creagia/filament-code-field # 对于 Filament 3 和 Laravel 10-12 composer require "creagia/filament-code-field:^2.0.0" # 对于 Filament 2 composer require "creagia/filament-code-field:^1.0.0"
安装完成后，你就可以在你的Filament资源或页面中轻松使用它了。
核心功能与使用示例
使用 CodeField 非常简单，只需像其他Filament字段一样实例化它：
use Creagia\FilamentCodeField\CodeField;
use Filament\Forms\Form;
public static function form(Form $form): Form
{
return $form
->schema([
CodeField::make('my_json_data')
->label('JSON 配置'),
// 其他字段...
]);
}默认情况下，它会创建一个JSON代码字段。但你可以轻松切换到其他支持的语言：
1. 选择代码语言
creagia/filament-code-field 支持 JSON, PHP, HTML, XML 和 JavaScript (JS)。你可以使用 setLanguage() 方法或便捷的辅助方法来指定语言：
use Creagia\FilamentCodeField\CodeField;
// 示例：创建 JavaScript 代码字段
CodeField::make('js_script')
->setLanguage(CodeField::JS),
// 或者更简洁的方式：
// ->jsField(),
// 示例：创建 PHP 代码字段
CodeField::make('php_code')
->phpField(),
// 示例：创建 HTML 模板字段
CodeField::make('html_template')
->htmlField(),2. 禁用代码自动补全
如果你觉得某些场景下不需要自动补全，可以轻松禁用它：
CodeField::make('config_code')
->jsonField()
->disableAutocompletion(),3. 显示行号
对于较长的代码片段，行号是必不可少的功能，可以这样开启：
CodeField::make('large_script')
->phpField()
->withLineNumbers(),4. 只读模式
如果你只想展示代码而不允许编辑，可以利用Filament自带的 disabled() 方法：
CodeField::make('view_only_code')
->jsonField()
->disabled() // 使字段只读
->label('查看配置'),5. 兼容Filament的其他字段方法
由于 CodeField 继承自Filament的字段类，因此你可以继续使用所有常见的Filament字段方法，如 label()、hint()、helper() 等，以增强用户体验：
CodeField::make('my_json')
->label('你的 JSON 数据')
->hint('请确保JSON格式正确')
->helper('此处可以编辑应用程序的JSON配置。')
// 更多方法...总结与实际应用效果
引入 creagia/filament-code-field 后，我的Filament后台管理系统焕然一新！
- 用户体验大幅提升： 管理员现在可以在一个专业、舒适的环境中编辑代码，就像在本地IDE中一样，大大减少了心理负担。
- 代码质量和数据准确性提高： 语法高亮和自动补全显著减少了拼写错误和格式错误，确保了配置文件的有效性。
- 开发效率加速： 定位和修改代码变得更加直观和快捷，节省了宝贵的开发和调试时间。
- 应用场景广泛： 无论是编辑网站的元数据（JSON）、自定义的业务逻辑（PHP/JS）、电子邮件模板（HTML），还是查看API响应的原始数据，这个字段都能提供完美的解决方案。
creagia/filament-code-field 不仅仅是一个简单的输入框，它为FilamentPHP开发者提供了一个强大且优雅的代码管理工具。如果你也曾为在Filament后台编辑代码而烦恼，那么我强烈推荐你尝试一下这个Composer包，它一定会让你的开发工作事半功倍！
