Un editor WYSIWYG ("What You See Is What You Get" o "Lo que ves es lo que obtienes") permite a los usuarios crear y editar contenido sin la necesidad de escribir codigo HTML, facilita la creación de publicaciones de manera intuitiva.
Para este proyecto, he elegido TinyMCE como editor WYSIWYG por su facilidad de instalación y uso, cuenta con una documentación bien detallada y compatibilidad con diferentes FrameWorks, TinyMCE cuenta con una versión gratuita con caracteristicas esenciales y la opción premium cuenta con funciones más avanzadas, permite la integración de plugins adicionales y la modificación de la interfaz.
Podemos utilizar TinyMCE con diferentes FrameWorks, pero en este caso instalaremos y configuraremos utilizando el FrameWork de Bootstrap5, en caso de querer instalar TinyMCE con cualquier otro FrameWork en este enlace podreis ver con que otros FrameWorks TinyMCE es compatible.
TinyMCE es uno de los editores WYSIWYG más populares y fáciles de usar. Para incluirlo en una página web basta con agregar el siguiente script en el archivo HTML o PHP.
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
Aquí se muestra cómo inicializar el editor TinyMCE en tu página web.
tinymce.init({
selector: '#editor',
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist | link image'
});
Para integrar TinyMCE con Bootstrap 5, solo necesitas agregar las clases correspondientes de Bootstrap.
<div class="container mt-4">
<h2>Editor de texto WYSIWYG</h2>
<textarea id="editor">Escribe aquí tu contenido...</textarea>
</div>