El Word de Filament: negritas, cursivas, listas y más
¿Qué es un editor de texto enriquecido?
Es un campo donde el usuario puede formatear el texto. En lugar de solo escribir palabras, puede darles estilo: negrita, cursiva, títulos, listas, enlaces, incluso imágenes.
💡 El resultado se guarda como HTML en la base de datos.
¿Cuándo usar RichEditor?
Cuando necesitas contenido formateado: artículos de blog, descripciones de productos con estilo, páginas de contenido, emails personalizados.
📍 Archivo: app/Filament/Resources/ArticuloResource.php
📝 ESTE ES EL CÓDIGO QUE VAMOS A APRENDER:
📍 Archivo: app/Filament/Resources/ArticuloResource.php
RichEditor::make('contenido')
->label('Contenido del artículo'),🔍 Vamos a entender línea por línea (como si fuera la primera vez):
RichEditor::make('contenido')→ Creamos un editor de texto enriquecido. Es como un mini Word dentro del formulario. El campo en la base de datos debe ser de tipo TEXT o LONGTEXT.
->label('Contenido del artículo')→ La etiqueta que ve el usuario. Le indica que ahí va el contenido principal con formato.
📊 Textarea vs RichEditor:
| Característica | Textarea | RichEditor |
|---|---|---|
| Formato | Solo texto plano | HTML con estilos |
| Botones | No tiene | Barra de herramientas |
| Negrita/Cursiva | No | Sí |
| Listas | Manuales | Automáticas |
| Enlaces | Texto plano | Clickeables |
👆 Usa RichEditor cuando necesites texto con formato.
La barra de herramientas por defecto
RichEditor viene con botones predefinidos: negrita, cursiva, subrayado, enlaces, listas, títulos, citas, código, y más. El usuario tiene todo lo necesario sin configurar nada.
// Botones incluidos automáticamente:
// - Negrita, Cursiva, Subrayado, Tachado
// - Enlaces
// - Listas (viñetas y números)
// - Títulos (H1, H2, H3)
// - Cita, Código
// - Deshacer, Rehacer💡 En la siguiente lección veremos cómo personalizar los botones con toolbarButtons().
📁 ¿Quieres ver el código completo del archivo? (opcional)
Esto es solo para que veas dónde va tu código. No necesitas memorizar todo esto:
// app/Filament/Resources/ArticuloResource.php
public static function form(Form $form): Form
{
return $form
->schema([
TextInput::make('titulo')
->required(),
RichEditor::make('contenido')
->label('Contenido del artículo')
->required(),
]);
}🎉 ¿Qué aprendimos hoy?
RichEditor::make()crea un editor de texto con formato- El usuario puede usar negritas, cursivas, listas, enlaces…
- El contenido se guarda como HTML en la base de datos
- Viene con una barra de herramientas completa por defecto
¡Ahora tus formularios pueden tener contenido con estilo! En la siguiente lección veremos cómo personalizar los botones.