Personaliza los botones de tu editor Markdown
¿Por qué personalizar los botones en Markdown?
MarkdownEditor tiene botones que insertan código Markdown automáticamente. Si solo necesitas formato básico, puedes simplificar la barra de herramientas.
💡 Los botones insertan el símbolo Markdown por ti, para que no tengas que escribirlo.
Botones disponibles en MarkdownEditor
Los botones son ligeramente diferentes a RichEditor porque están pensados para Markdown.
📍 Archivo: app/Filament/Resources/NotasResource.php
📝 ESTE ES EL CÓDIGO QUE VAMOS A APRENDER:
📍 Archivo: app/Filament/Resources/NotasResource.php
MarkdownEditor::make('notas')
->label('Notas rápidas')
->toolbarButtons([
'bold',
'italic',
'heading',
'bulletList',
'codeBlock',
]),🔍 Vamos a entender línea por línea (como si fuera la primera vez):
MarkdownEditor::make('notas')→ Creamos un editor de Markdown para notas rápidas. No necesitamos todas las herramientas.
->label('Notas rápidas')→ La etiqueta indica que es para notas, algo simple.
->toolbarButtons(['bold', 'italic', ...])→ Solo mostramos los botones esenciales. Cada botón inserta el símbolo Markdown correspondiente.
📊 Botones disponibles en MarkdownEditor:
| Botón | Qué inserta | Resultado |
|---|---|---|
| bold | **texto** | negrita |
| italic | *texto* | cursiva |
| heading | # Título | Título grande |
| bulletList | – elemento | Lista con viñetas |
| orderedList | 1. elemento | Lista numerada |
| codeBlock | «` código «` | Bloque de código |
| link | [texto](url) | Enlace |
| blockquote | > cita | Cita destacada |
👆 Los botones te ayudan a escribir Markdown sin memorizar la sintaxis.
Comparación de toolbarButtons
// RichEditor - guarda HTML
RichEditor::make('contenido')
->toolbarButtons(['bold', 'italic', 'link'])
// MarkdownEditor - guarda Markdown
MarkdownEditor::make('contenido')
->toolbarButtons(['bold', 'italic', 'link'])💡 Los nombres de botones son similares, pero el resultado guardado es diferente (HTML vs Markdown).
📁 ¿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/NotasResource.php
public static function form(Form $form): Form
{
return $form
->schema([
TextInput::make('titulo')
->required(),
MarkdownEditor::make('notas')
->label('Notas rápidas')
->toolbarButtons([
'bold',
'italic',
'heading',
'bulletList',
'codeBlock',
]),
]);
}🎉 ¿Qué aprendimos hoy?
->toolbarButtons([...])también funciona en MarkdownEditor- Los botones insertan código Markdown automáticamente
- Botones comunes: bold, italic, heading, bulletList, codeBlock
- Ayuda a usuarios que no memorizan la sintaxis Markdown
¡Ya dominas los editores de texto enriquecido! En las siguientes lecciones veremos tipos especiales de TextInput: password, tel, url…