Documentación Wysiwyg
Descargar PDFIntroducción
Un editor Wysiwyg (What you See is What You Get) es una herramienta que permite a los usuarios crear y editar contenido de manera visual sin la necesidad de escribir código HTML directamente. Estos editores se utilizan para la creación de contenido web, estas herramientas facilitan la redacción de artículos, blogs, correos electrónicos y documentos sin conocimientos de programación.
Los editores Wysiwyg se utilizan en diversos entornos, como sistemas de gestión, plataformas de blogs, foros, aplicaciones web entre otros entornos. Gracias a su interfaz intuitiva, permite a los usuarios trabajar con texto, imágenes, tablas, enlaces y otros elementos multimedia sin tener que manipular el código fuente directamente
Entre los editores Wysiwyg más populares se encuentran TinyMCE, CKEditor, Froala y Quill. En mi caso utilizaremos TinyMCE.
TinyMCE: Qué es y para qué se utiliza
TinyMCE es un editor de texto basado en JavaScript que permite integrar funcionalidades de edición avanzada en aplicaciones web. Proporciona a los desarrolladores una solución exible y personalizable para la creación de contenido sin la necesidad de escribir directamente en HTML.
Se utiliza en sistemas de gestión de contenidos, aplicaciones de edición de documentos en línea, plataformas de blogging y cualquier entorno donde se requiera un editor de texto. TinyMCE facilita la creación de contenido estructurado. Elegí TinyMCE porque es fácil de instalar y congurar, además de contar con una documentación completa que facilita su implementación. Además, permite la integración de plugins y es compatible con una gran variedad de FrameWorks como Bootstrap5, Angular, VUE, React y muchos más FrameWorks.
Instalación y Conguración
TinyMCE se puede instalar de varias maneras dependiendo del entorno de desarrollo. Nosotros utilizaremos la forma de integración con Bootstrap5, pero podemos utilizar la instalación según el FrameWork que tengamos
1º Paso: Descargar y enlazar los archivos.
Tenemos dos formas de instalar, podemos descargar TinyMCE o utilizar la forma self hosted que no hace falta descargar.
Una vez descargado y descomprimido TinyMCE tendremos que integrarlo en nuestra carpeta del proyecto como se muestra en la siguiente captura.
2º Paso: Inserción con el FrameWork
Una vez que tenemos los archivos descargados y enlazados nos toca ver la documentación de que código y scripts necesitamos insertar en nuestro contenido HTML.
Una vez en documentación tendremos que ir a la sección de get started y luego entrar en la pestaña de instalación, nos aparecerán los FrameWorks disponibles con TinyMCE como se muestra en la siguiente captura.
En nuestro caso utilizaremos la integración con Bootstrap 5 y debemos seguir los pasos que se nos muestran en la documentación.
Para que funcione necesitamos tener la CDN de boostrap5 o tener los archivos de bootstrap5, una vez que tenemos bootstrap debemos incluir este script en el código (Este paso ya lo tenemos).
Ahora debemos incluir estas líneas de código HTML para tener el editor
Por último en este paso tendremos que añadir el inicializador para poder tener nuestra funcionalidad, para que funcione incluiremos estas líneas de código.
Si queremos poner un mensaje por defecto cuando se entre en la página debemos modicar este código, se tendrá que ver así.
Opcional: Podemos inuir en los diálogos de bootstrap 5 con este código Para representar instancias de TinyMCE dentro de los cuadros de diálogo de la interfaz de usuario de Bootstrap, agregue el siguiente código:
Una vez congurado los codigos y la dirección de los archivos de TinyMCE podremos ir a nuestra página y encontraremos que ya tenemos nuestro editor Wysiwyg como vemos en esta captura.
3º Paso: Integración con PHP y MySQL
Para que nuestro editor TinyMCE funcione con PHP y MySQL debemos hacer un formulario donde enviamos el mensaje como se muestra en la siguiente captura.
Este formulario envía el mensaje al archivo enviar.php, este transforma el mensaje en un array, con las funciones trim eliminamos los espacios en blanco que no sean necesarios y con real_escape_string quitamos los caracteres especiales para evitar la inyección SQL
y Luego mostramos los registros donde queramos los mostramos de la siguiente manera.
Y por último en caso de salir un error en el que no podamos usar nuestro editor deberemos registrarnos para conseguir una API KEY que debemos poner en el head de nuestro archivo HTML o PHP.
