El mejor editor WYSIWYG de Magento 2 para comercio electrónico

Contenido

Magento 2 se encuentra entre las plataformas CMS de código abierto más utilizadas para tiendas en línea. Aproximadamente el 20% de todos los sitios web de comercio electrónico a nivel mundial se basan en la plataforma y más de $ 155 mil millones se procesan en transacciones manejadas por sus capacidades.

El editor wysiwyg de Magento permite editar el contenido relacionado para todos aquellos que no estén familiarizados con HTML, lo que acelera las publicaciones al hacer innecesario especificar etiquetas y atributos manualmente. Como tal, puede ver el aspecto final del proyecto en Magento 2 desde el principio.

¿Qué es Magento 2 WYSIWYG Editor?

Si se pregunta qué es un editor wysiwyg, finalmente ha encontrado la respuesta.

WYSIWYG (What You See Is What You Get) está diseñado para editar la forma de presentación de un documento sin realizar ninguna manipulación con el código fuente y escribir bloques manualmente. Todo lo que se necesita manipular son los componentes integrados del editor para ver el panorama general de un documento, proyecto o evento sin terminar (Diseño de iluminación WYSIWYG).

Los programadores y codificadores tienden a criticar este enfoque de diseño, quejándose de la participación significativa del código "sucio" involucrado. Los editores modernos, sin embargo, mejoran constantemente y algunos son capaces de garantizar la buena calidad del flujo de trabajo con los mínimos inconvenientes.

Inicialmente, los navegadores admitían principalmente las capacidades de edición WYSIWYG , pero las funciones de lectura se habían centrado gradualmente más (sin considerar la edición de texto en los formularios de entrada). Los navegadores modernos, sin embargo, son muy susceptibles a la edición de páginas web. Los momentos esenciales a los que debe prestar atención al realizar cualquier cambio son los siguientes.

El modo de personalización se puede iniciar de dos formas:

• designMode : edición de elementos individuales (ventana, marco);
• contentEditable : edición de elementos con texto.

El método document.execCommand permite ejecutar comandos (personalización de fuentes, agregar enlaces, etc.) para editar áreas y estilizar etiquetas.

event.preventDefault debe usarse al iniciar cambios de botón. De lo contrario, el comando no se ejecutará mientras solo se procese el botón.

La verificación de seguridad del texto permite asegurarse de que contiene un elemento JavaScript dañino que abre oportunidades de ataque XSS. En algunos navegadores (como Firefox), está habilitado de forma predeterminada, lo que restringe el uso de funciones relacionadas con el búfer (por ejemplo, copiar / pegar). Las restricciones se pueden eliminar con la ayuda de about: config.

Si es necesario, se puede crear contenido editable a través de HTML, lo que le permite trabajar con React, Angular y otros marcos similares para una administración exhaustiva de componentes cuyo contenido no se puede editar.

Las 7 mejores soluciones de software WYSIWYG

Los editores WYSIWYG se utilizan para la creación de aplicaciones, sitios web de diversos fines o para tareas de gestión de contenido. No requieren necesariamente el conocimiento de HTML o habilidades de codificación.

Un editor eficiente de este tipo debería poseer las siguientes propiedades:

• una interfaz de edición de contenido basada en texto separada
• todas las funciones estándar de procesamiento de documentos;
• la capacidad de editar código y ver su vista previa en una publicación;
• integración, exportación y publicación de contenido a través de herramientas conectadas.

Las siguientes soluciones de software proporcionan eso y más.

TinyMCE

Uno de los editores más accesibles pero multifuncionales que impulsó Atlassian, Medium y Evernote, entre otros. Admite implementaciones híbridas y en la nube y se puede integrar con algunos de los marcos más reconocidos: React, Vue, Angular.

Editor visual

Éste permite realizar cambios y correcciones en proyectos sin tener que pasar por el marcado de wikitexto.

SummerNote

Editor WYSIWYG súper simple en Bootstrap SummerNote: una biblioteca de JavaScript que permite construir editores personalizados en línea.

Pluma

Un editor de código abierto que se puede adaptar fácilmente a los requisitos personalizados y las especificaciones comerciales gracias a una arquitectura prescindible y una API flexible.

Editor de Froala

Un editor basado en JavaScript que se integra fácilmente con los entornos de desarrollo más comunes y tiene una interfaz fluida. Un buen conjunto de complementos dedicados y documentación detallada, solo que este es aún más eficiente.

CKEditor 4

Un editor basado en texto con la arquitectura basada en navegador, que permite utilizar funciones generales y ampliadas de procesamiento de contenido. Distribuido solo por licencias comerciales, pero es una solución de código abierto.

ContentTools

Un buen editor de contenido basado en HTML. Tiene una puntuación de usuario bastante alta entre herramientas WYSIWYG similares.

Lea también: Cómo contratar a los mejores desarrolladores de Magento

Editor WYSIWYG de Magento 2

En términos de creación de recursos de comercio electrónico basados ​​en Magento 2, WYSIWYG se utiliza para editar contenido de backend sin necesidad de conocimientos de programación. Estos son los editores básicos dedicados a Magento de este tipo.

TinyMCE 4 - WYSIWYG Editor Pro

Un editor básico de magento wysiwyg que generalmente se emplea de forma predeterminada. Las principales características incluyen:

• adición de arrastrar y soltar para archivos de foto / video, múltiples cargas y personalización del tamaño de archivo en tiempo real;
• encabezados y descripciones automatizados basados ​​en el título del archivo (soporte de varios archivos así como de archivos con nombres en UTF-8 Unicode);
• adición del widget, bloques, variables y URL de Magento;
• modo de búsqueda, clasificación, personalización y vista inteligente;
• Personalizaciones en profundidad: los widgets, galerías y variables se pueden implementar como complementos, tanto a granel como por separado para cada otra instancia.

Creador de páginas de Magento 2

Con este, los usuarios obtienen una capacidad muy esperada de crear páginas personalizadas sin ningún cambio de código requerido. Page Builder es un editor visual que permite personalizar páginas a través de una interfaz conveniente e intuitiva (que también incluye arrastrar y soltar). Los activos se agregan arrastrando y soltando tipos de contenido preparados previamente; las opciones disponibles se pueden ver en el menú.

En general, las principales funciones de los tipos de contenido incluyen:

• creación de publicaciones arrastrando y soltando;
• ajustar una vista previa en la tienda;
• creación de formularios y entornos de entrada.

Hay dos tipos principales de configuración de Page Builder que dependen de las necesidades del usuario final:

• expansión de los tipos existentes;
• creación de los nuevos.

Un editor está integrado con Magento Commerce con la funcionalidad básica y está disponible para comprar para todos los propietarios de Magento Open Source.

Lea también: Una guía completa sobre la migración de Magento: mueva su tienda de comercio electrónico a Magento desde cualquier plataforma

Cómo configurar el editor WYSIWYG en Magento 2 [actualizado en 2021]

Ya sabe qué es Magento 2 WYSIWYG Editor y cuáles son las mejores soluciones de software WYSIWYG. Y probablemente se pregunte cómo agregar el editor WYSIWYG en el sistema Magento 2. Entonces, ahora es el momento de revelar cómo configurar el editor WYSIWYG en Magento 2. Siga leyendo para estar al tanto de 4 sencillos pasos.

Cómo habilitar / deshabilitar el editor WYSIWYG

Con Magento 2 WYSIWYG Editor, puede crear de forma accesible bloques y páginas de CMS, descripciones de productos y categorías. Es simple agregar y editar texto, widgets, enlaces, variables e imágenes sin involucrar ningún HTML y ver los resultados inmediatos de sus acciones en el backend.

Sin embargo, debe tener en cuenta que el editor agrega espacios adicionales en el código o puede guardarlo en un formato incompatible cuando se editan páginas o bloques prefabricados, lo que puede causar problemas de marcado y diseño.

Para evitar tales posibles dificultades, es mejor habilitar / deshabilitar el editor cuando se realizan cambios en el código HTML, lo que requiere la siguiente secuencia de acciones.

1. Vaya a Panel de administración-> Tiendas-> Configuración;
   
2. Haga clic en General-> Gestión de contenido para ver la opción de habilitar / deshabilitar.
   
3. Wysiwyg está habilitado de forma predeterminada. Para deshabilitarlo, desmarque la opción Usar valor del sistema y seleccione la opción del menú desplegable
   • Deshabilitado de forma predeterminada: el editor HTML estará visible al cargar la página y puede cambiarlo por un editor WYSIWYG;
   • Desactivado por completo: las capacidades de edición se desactivarán por completo.
   
   
4. Guarde todos los cambios. Si tiene un problema de que el editor WYSIWYG de Magento 2 no funciona correctamente, debe verificar todos los requisitos principales y limpiar el caché de la siguiente manera:
   • Vaya a Sistema-> Herramientas-> Gestión de caché;
     
   • En la lista, haga clic en Actualizar-> Seleccionar todo-> Enviar.
     

Resumen

La selección de un editor WYSIWYG al crear un sitio web debe basarse en los objetivos de la empresa, las necesidades, los requisitos de experiencia del usuario, el presupuesto, la estrategia de marketing, la base técnica y muchos otros aspectos. Como tal, no puede haber una única mejor opción universal. Ir con Magento 2, sin embargo, es la mejor opción para una empresa progresista.

Algunos pueden considerar que el precio de la solución es irrazonable, pero tenga la seguridad de que cada centavo que gasta en ella vale la pena a largo plazo. La mayoría de los desafíos relacionados con el trabajo con Magento 2 se pueden manejar con éxito si cuenta con un equipo de desarrolladores expertos y calificados con buena experiencia en BA en comercio electrónico a su lado.

Si todavía está buscando un socio comercial decente que lo ayude a resolver tareas y superar desafíos en la materia, comuníquese con los especialistas de Dinarys ahora mismo. Tenemos una gran experiencia en el campo del comercio electrónico y podemos aclarar cualquier matiz, así como ayudarlo a implementar y lanzar su proyecto de la manera más adecuada y eficiente.