33 Comó usar CKEDITOR en nuestro FORMULARIO WEB super facil y rapido con (LARAVEL y MYSQL) FULLSTACK
Duración: 8 minDescripción
📝 Lección 33 (Contenido Estimado): Implementación del Editor de Texto Enriquecido (WYSIWYG)
Esta lección se enfoca en resolver el problema de la descripción de la película, que actualmente solo permite texto plano. El objetivo es integrar una librería de editor de texto que permita al administrador aplicar formato avanzado (negritas, cursivas, listas) antes de guardar el registro en la base de datos.
1. 🛠️ Integración de una Librería WYSIWYG
- Librería Seleccionada: El instructor selecciona e integra una librería de editor de texto popular (como CKEditor o TinyMCE).
- Inclusión de Archivos: Se añaden los archivos CSS y JavaScript necesarios de la librería al layout o específicamente a la vista create.blade.php.
2. 🔌 Inicialización del Editor en la Vista
Script de Inicialización: Se utiliza código JavaScript para inicializar el editor sobre el textarea de la descripción de la película.
JavaScript
// Ejemplo: Inicializar el editor sobre el campo de la descripción. // El script se coloca al final de la vista create.blade.php ClassicEditor .create( document.querySelector( '#id-del-textarea-descripcion' ) ) .catch( error => { console.error( error ); } );
- Resultado: El textarea simple se transforma en una barra de herramientas de edición con opciones de formato.
3. 💾 Manejo de Datos Enriquecidos
- Almacenamiento de HTML: El método store() en el controlador de Laravel ahora recibe el código HTML completo generado por el editor.
- Impacto en la Base de Datos: Se verifica que la base de datos almacene correctamente las etiquetas HTML (ej. <b>, <i>, <p>) junto con el texto de la descripción.
Próxima Lección Esperada: La implementación de la precarga o previsualización de la imagen de portada.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
