Bueno, WYSIWYG o Lo Que Ves, Es Lo Que Tienes es un editor que le permite obtener una vista previa de los resultados finales antes de que la interfaz o el documento entre en funcionamiento. En palabras simples, Editores WYSIWYG muestre instantáneamente el contenido en vivo en la web de la misma manera que en la vista previa. Entonces, cualquier edición que realice en su contenido web se verá igual al generar el resultado final.
¿No es asombroso?
Lo es, y esta es la razón de su creciente popularidad. Hay muchos editores WYSIWYG disponibles en el mercado que pueden resultar útiles para crear páginas web dinámicas, blogs, etc.
Aparte de esto, muchos editores WYSIWYG avanzados le permiten cargar imágenes, archivos de películas flash al servidor web, etc.
Quizás se pregunte: ¿Por qué debería optar por los editores WYSIWYG?
Los editores WYSIWYG son una de las herramientas más excelentes para principiantes. Ayudan a crear rápidamente páginas web y publicarlas en Internet sin ningún conocimiento de codificación. No importa si no sabes nada de codificación HTML; Aún puedes crear sitios web visualmente atractivos sin ninguna dificultad.
Para entender esto, repasemos algunos de los beneficios que ofrece sobre los editores de texto estándar.
Beneficios de los editores WYSIWYG
- Mejor navegación de código
Si ha utilizado un editor de texto de codificación tradicional, debe tener cuidado de buscar líneas de código para encontrar lo que desea. Aunque no es gran cosa, a veces irrita al editar plantillas.
Los editores WYSIWYG no tienen esos problemas. Puede utilizar la función de navegación de su editor para localizar elementos específicos rápidamente en su página. También puede realizar los cambios correspondientes. Algunos de los editores WYSIWYG avanzados como Fróala vienen con funciones de vista previa instantánea que le permiten ver cómo los cambios afectarán el resultado final.
- Copiar/Pegar desde MS Word/OpenOffice Writer
Los editores WYSIWYG le permiten copiar y pegar texto desde MS Word/OpenOffice Writer en su sitio web. Algunos de los editores avanzados como Froala le permiten copiar y pegar tanto desde Microsoft Word como desde Excel.
Esta función le permitirá ahorrar mucho tiempo, especialmente cuando tenga que copiar largos fragmentos de texto e imágenes. Lo que marca la diferencia es si el texto pegado coincide o no con el formato del sitio, ya que los sitios de WordPress no utilizan espacios en blanco para los párrafos.
- Formateo automático
Lo que hace que los editores HTML WYSIWYG sean mejores que los editores de codificación tradicionales basados en texto es su capacidad para formatear automáticamente los códigos, asegurando que todas las etiquetas estén en su lugar. Esto evitará que te metas en tediosas sesiones de edición para corregir los errores.
- Sin barrera del idioma
Los editores HTML WYSIWYG le permiten trabajar en su contenido en cualquier idioma que necesite. Significa que si su sitio web tiene su sede en Rusia y está traducido al ruso, puede escribir directamente en su sistema de gestión de contenidos. No necesita preocuparse por el contenido mostrado en Rusia.
Nota: Algunos de los editores HTML WYSIWYG avanzados como Froala simplemente funcionan en cualquier idioma (incluidos los idiomas del este de Asia). Por eso se utiliza en todo el mundo en más de 100 países.
- Títulos creativos con facilidad
Con los editores HTML WYSIWYG, no necesita preocuparse por escribir código de formato. Puede escribir rápidamente títulos llamativos con solo hacer clic en un botón. Aparte de esto, obtendrás infinitas posibilidades para experimentar con los títulos. Esto le ahorrará tiempo y dinero..
- Asistencia de marcado
Los editores HTML WYSIWYG le permiten crear contenido sin grandes conocimientos de codificación. Le presenta una representación visual del contenido. Esto le permite realizar cambios en la página según la estética y el diseño en lugar de involucrarse en las limitaciones técnicas. Esto le dará más tiempo para trabajar en el diseño en lugar de involucrarse en la codificación.
- Hipervínculos fluidos
No hay rival para los editores HTML WYSIWYG cuando se trata de hipervínculos entre páginas. Los editores de codificación tradicionales basados en texto exigen precisión en la ubicación de los enlaces. Si los enlaces no se colocaron lo suficientemente cerca de los objetivos previstos, las posibilidades de que sus lectores los noten son bajas. Como resultado, no se realizará ninguna acción deseada por parte del usuario. Pero con los editores HTML WYSIWYG, resaltar el texto seguido de un clic será suficiente.
- Cambios rápidos
Anteriormente, no había editores avanzados, por lo que había que realizar algunos cambios en el código y luego publicarlo en el servidor para ver el resultado final. Pero con los editores WYSIWYG, no tendrás que pasar por esta molestia. Todo lo que necesita hacer es realizar cambios en el sistema de administración de contenido y podrá ver los cambios instantáneamente una vez que los guarde.
- Alto rendimiento
Los editores WYSIWYG están diseñados específicamente para tener en cuenta el rendimiento. Algunos editores como Froala pueden incluso soportar las pruebas más rigurosas y ofrecer un rendimiento fluido incluso durante tareas pesadas. Es lo suficientemente capaz de inicializarse en menos de 40ms. Muy rápido, ¿no?
- Accesibilidad
Cuando se trata de accesibilidad, muchos de los editores de texto estándar no logran hacer frente a las crecientes necesidades. Ligeros editores como Froala ofrecen edición de texto enriquecido en diversas condiciones. Es compatible con Sección 508, WCAG 2.0 y WAI-ARIA para ofrecer un acceso inmejorable en diversos escenarios.
Después de analizar estos beneficios, debes tener la curiosidad suficiente para intentarlo, ¿no?
Bueno, ¿quién te detiene? Simplemente agréguelo a su sitio y vea los resultados usted mismo.
¿Cómo agregar un editor WYSIWYG a su sitio?
Bueno, cuando se trata de agregar un editor WYSIWYG a su sitio, existen muchas opciones para lo mismo. Esta guía trata sobre cómo agregar un Editor WYSIWYG de Froala. a su sitio
Quizás te preguntes ¿por qué Froala?
Como editor fácil de usar para desarrolladores, le ofrece la posibilidad de ampliar aún más sus capacidades. Froala viene con más de 30 complementos fuera de la caja. Lo bueno de Froala es la optimización que te permite usarlo en varias plataformas como computadoras de escritorio, portátiles, tabletas, etc. Además, no importa si estás utilizando una plataforma Android o iOS; Froala es compatible con ambos.
Pero lo que lo hace único es su fácil integración. Puedes integrarlo con WordPress, reaccionar o cualquier tecnología frontend sin ninguna dificultad.
Agreguémoslo a su sitio siguiendo unos sencillos pasos.
Paso 1: Instalar
Cuando se trata de instalar el editor Froala, existen muchas maneras para hacerlo. Aquí se utiliza NPM. Es una de las mejores y más fáciles opciones.
Para MNP, escriba el comando que se proporciona a continuación.
| npm instala el editor froala |
Una vez que se complete el proceso de instalación, incruste el código que se proporciona a continuación en su archivo HTML.
Nota: También puedes utilizar CDN como alternativa.
Paso 2: Crear
Puede iniciar el editor Froala en cualquier elemento DOM, pero se recomienda utilizar un DIV .
Añadir un vacío elemento que se convertirá en un editor de texto enriquecido.
Paso 3: Inicialización
Inicialice el editor Froala en el elemento vacío creado previamente.
| var editor = nuevo FroalaEditor('#ejemplo') |
Paso 4: mostrar contenido
Incluya los archivos CSS que se proporcionan a continuación para preservar el aspecto del HTML editado fuera del editor de texto enriquecido.
<liga href=”../css/froala_style.min.css” rel=”hoja de estilo” tipo=”texto/css” /> |
No olvides poner el contenido editado dentro de un elemento con el vista fr.
Aquí viene el HTML editado con el editor de texto enriquecido Froala. </div> |
Aquí hay un formulario de ejemplo completo que muestra la integración del editor HTML WYSIWYG de Froala con un sitio.
e
| <html> <cabeza> <liga href=”https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css” rel=”stylesheet” type=”text/css” /> <guión type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js”></guión> </cabeza> <cuerpo> <div id="ejemplo"></div> <div clase =”fr-vista”> Aquí viene el HTML editado con el editor de texto enriquecido Froala. </div> </cuerpo> <guión> var editor = nuevo FroalaEditor('#ejemplo') </guión> </html> |
Así es como se verá finalmente el formulario. Ahora puedes usarlo para editar o crear el tipo de contenido enriquecido que desees. Simplemente escriba o inserte el texto y realice operaciones para ver los resultados usted mismo. También puedes contar con la ayuda de documentación. Le brindará un enfoque sencillo para utilizar Froala en todo su potencial.
Ya sea texto o gráficos, Froala le permite editar el contenido con mayor precisión en comparación con los editores de texto estándar. Le permite experimentar con el diseño, los colores y el formato del contenido sin necesidad de conocimientos de codificación. Es por eso que personas de todo el mundo están optando por este editor. Entonces, ¿por qué no ser uno de ellos y aprovechar la oportunidad a su favor?
Final para llevar
Hay muchos editores WYSIWYG disponibles en el mercado para elegir, pero lo que más importa es su facilidad de implementación y uso. Fróala es uno de esos editores HTML WYSIWYG de próxima generación que ha ganado mucha popularidad ya que ofrece ambos en un solo lugar. Esta guía le ha mostrado la integración de un editor HTML WYSIWYG de Froala con el sitio. Todo lo que necesita hacer es implementar los pasos indicados en el mismo orden para disfrutar de los beneficios de un editor WYSIWYG avanzado.
Introducción a la carga de archivos de UI de materiales | Carga de archivos en Material UI y ejemplo