Los 7 mejores editores HTML WYSIWYG de código abierto

Hay dos tipos de editores de código: editor simple basado en texto y WYSIWYG (lo que ves es lo que obtienes). En nuestro artículo anterior, discutimos algunos de los mejores Editor HTML de código abierto donde escribe manualmente el código. Si bien no hay problemas con los editores de HTML basados en texto, no obstante, son de la vieja escuela. Y ahí es donde entra en juego el editor HTML WYSIWYG de código abierto. Los editores HTML WYSIWYG proporcionan opciones visuales para crear un sitio web sin ningún conocimiento de programación (recuerde el Wix Anuncio, eso es wizzy-sig)

El editor HTML WYSIWYG tiene varias ventajas sobre los editores basados en texto. Para empezar, puede crear un sitio web con editores WYSIWYG incluso si no sabe codificar. Todo lo que tiene que hacer es arrastrar y soltar elementos en el editor y, una vez que haya terminado, simplemente copie el código. Sin embargo, encontrar un buen editor HTML WYSIWYG de código abierto puede ser una tarea ardua. Aquí es donde entramos.

Lea también: Más de 50 aplicaciones de Android de código abierto cuando quieras deshacerte de Google

El mejor editor HTML WYSIWYG de código abierto

1. Pelar

Pell es probablemente el editor WYSIWYG más pequeño y simple con el que te encontrarás. ¡Literalmente tiene un tamaño de 1,38 kb!

Ofrece todas las funcionalidades y formatos básicos como encabezados, negrita, cursiva, listas, citas, enlaces e imágenes. Otras acciones disponibles incluyen sangría, superíndices, subíndices y nombre y tamaño de fuente. Una vez que haya terminado de escribir y formatear con Pell, generará el código HTML completo que luego puede simplemente copiar y pegar en su sitio web o página y estará listo para comenzar.

Interfaz Pell

Ventajas:

WYSIWYG más pequeño y ligero
Sin dependencias
Fácilmente personalizable

Contras:

Sin edición de HTML sofisticada
Imágenes solo a través de enlaces

Veredicto:
Teniendo en cuenta su tamaño, Pell es un paquete atractivo. Pero seamos honestos, solo puede obtener archivos HTML básicos con las opciones de edición limitadas. Entonces, si usted es alguien que busca un editor WYSIWYG rápido y liviano que sea de código abierto para un trabajo muy básico, definitivamente eche un vistazo a Pell.

Obtener Pell

2. AbrirWYSIWYG

OpenWYSIWYG es un editor HTML de texto enriquecido para varios navegadores codificado completamente en JavaScript. Simplemente copiando y pegando unas pocas líneas de código, puedes convertir cualquier en el robusto editor HTML WYSIWYG de OpenWYSIWYG.</p> <p>La interfaz de usuario y las opciones de edición con los menús desplegables son muy similares a las de cualquier editor de texto y te sentirás como en casa. Además de todas las opciones básicas de formato, OpenWYSIWYG cuenta con un selector de color mejorado con 216 colores web para elegir y una poderosa herramienta de formato de tabla con todas las opciones que se te ocurran.</p> <p>Otra gran ventaja de OpenWYSIWYG es que, junto con todas las opciones visuales, aún puede <strong>ver código HTML sin formato</strong> y hacer ajustes directamente en el código. Útil para cuando desea aprender o actualizar sus habilidades de codificación.</p> <p><img decoding="async" loading="lazy" class="border aligncenter wp-image-34915 size-full" src="https://www.howtodo.es/wp-content/uploads/2022/08/OpenWYSIWYG.jpg" alt="Interfaz de usuario y diseño del editor OpenWYSIWYG" width="677" height="332" ></p> <p><strong>Ventajas:</strong></p> <ul> <li>Potente entorno de edición</li> <li>Interfaz de usuario intuitiva y fácil</li> <li>Selector de color y amplias opciones de edición de tablas.</li> </ul> <p><strong>Contras:</strong></p> <ul> <li>No actualizado en algunos años.</li> </ul> <p><strong>Veredicto:</strong><br />Al estar escrito en JavaScript, el editor HTML OpenWYSIWYG de código abierto debería funcionar con cualquier otro lenguaje de programación web. Si está buscando algo un poco más poderoso que Pell para incorporar en su aplicación web, esta es una gran opción.</p> <p><strong><a href="http://www.openwebware.com/demo" target="_blank" rel="noopener noreferrer">Obtener OpenWYSIWYG</a></strong></p> <h3>3. TinyMCE (Edición comunitaria)</h3> <p>El siguiente editor HTML WYSIWYG de código abierto en nuestra lista es TinyMCE. También está completamente escrito en JavaScript y ofrece una interfaz de usuario y una experiencia como la mayoría de los procesadores de texto. Eso lo hace más fácil de usar.</p> <p>TinyMCE<a href="https://www.tiny.cloud/pricing/" target="_blank" rel="noopener noreferrer"> no es gratis</a>, pero la Community Edition es gratuita y de código abierto. Viene con todas las opciones básicas de edición como formato de texto, listas, tablas y también algunas opciones de edición de imágenes.</p> <p>Los desarrolladores han mantenido el precio de los modelos premium según el número de usuarios. Algunas de las características premium incluyen soporte para Google Drive y Microsoft Azure, extensiones, corrector ortográfico y de enlaces, y soporte técnico.</p> <p><img decoding="async" loading="lazy" class="border aligncenter wp-image-34916 size-full" src="https://www.howtodo.es/wp-content/uploads/2022/08/TinyMCE.jpg" alt="Interfaz de usuario TinyMCE" width="677" height="383" ></p> <p><strong>Ventajas:</strong></p> <ul> <li>Soporte de extensión</li> <li>Gestión de archivos</li> <li>Apoyo técnico</li> <li>Editor de código estilo IDE para HTML</li> </ul> <p><strong>Contras:</strong></p> <ul> <li>Caro</li> <li>No completamente de código abierto</li> </ul> <p><strong>Veredicto:</strong><br />TinyMCE con su opción de fácil integración, interfaz de usuario fácil de usar y gran cantidad de funciones, es un paquete completo. Si solo desea el editor HTML WYSIWYG de código abierto más rico en funciones y está de acuerdo con gastar algo de dinero, TinyMCE es el camino a seguir. Además, ofrecen una prueba gratuita de un mes para su modelo Pro que siempre puede consultar.</p> <p><strong><a href="https://www.tiny.cloud/docs/demo/full-featured/" target="_blank" rel="noopener noreferrer">Obtenga una demostración de TinyMCE</a></strong></p> <h3>4. Jodit</h3> <p>Jodit es otro editor de código abierto WYSIWYG HTML rápido y liviano que puede incrustar en su código y comenzar a editar su página. Es bastante ligero con un tamaño de alrededor de 100 KB y ha sido escrito completamente en TypeScript. Es por eso que no necesita dependencias o bibliotecas para ejecutarlo.</p> <p>Viene con una interfaz de arrastrar y soltar para la imagen también. También puede adjuntar videos de YouTube o Vimeo a través de un enlace o incrustarlos. Lo mejor que me gusta de Jodit es que viene con un <strong>redactor de ACE</strong> Fuera de la caja y con un solo botón, puede cambiar entre el código real y el modo de vista previa.</p> <p><img decoding="async" loading="lazy" class="border aligncenter wp-image-34917 size-full" src="https://www.howtodo.es/wp-content/uploads/2022/08/Jodit.jpg" alt="Interfaz de usuario de Jodit" width="677" height="394" ></p> <p><strong>Ventajas:</strong></p> <ul> <li>Ligero, sin bibliotecas</li> <li>Arrastrar y soltar</li> <li>Editor ACE listo para usar</li> <li>Soporte técnico (Pagado)</li> </ul> <p><strong>Veredicto:</strong><br />Jodit ofrece lo mejor de ambos mundos: editor WYSIWYG visual sencillo y edición de código sin formato. Si eres alguien que tiene al menos algún conocimiento en HTML, Jodit podría ser la mejor opción para ti.</p> <p><a href="https://xdsoft.net/jodit/play.html" target="_blank" rel="noopener noreferrer"><strong>Consigue Jodit Playground</strong></a></p> <h3>5. Nota de verano</h3> <p>Summernote es un editor WYSIWYG súper simple de código abierto construido en jQuery y basado en Bootstrap. Dado que es compatible con Bootstrap, puede usar todos los estilos y temas admitidos en su editor desde Bootswatch.</p> <p>El código abierto del editor HTML WYSIWYG en sí mismo tiene una interfaz de usuario muy limpia y mínima e incluso puede editar o agregar opciones de formato según sus necesidades. Con el modo Air de Summernote, puede ocultar toda la barra de herramientas y editar su documento sobre la marcha. Conveniente. También puede convertir automáticamente todas las imágenes a base64, por lo que no tiene que manipular imágenes en absoluto.</p> <p>Para mí, la mejor parte de Summernote es el equipo trabajador de desarrolladores detrás de él que siempre está escuchando a la comunidad y agregando nuevas funciones. Los ejemplos incluyen soporte para complementos y una versión lite o vanilla de Summernote que no requiere Bootstrap.</p> <p><img decoding="async" loading="lazy" class="border aligncenter wp-image-34918 size-full" src="https://www.howtodo.es/wp-content/uploads/2022/08/Summernote.jpg" alt="editor visual de notas de verano" width="677" height="441" ></p> <p><strong>Ventajas:</strong></p> <ul> <li>Curva mínima de aprendizaje</li> <li>Modo aéreo para editar sobre la marcha</li> <li>Soporta Bootstrap 3.xx a 4.xx</li> <li>Ver y editar en HTML</li> </ul> <p><strong>Contras:</strong></p> <p><strong>Veredicto:</strong><br />Summernote es probablemente el editor HTML WYSIWYG de código abierto más rico en funciones pero gratuito disponible en el mercado y mejora constantemente. Si está trabajando con Bootstrap, entonces Summernote es obvio, pero incluso si no lo está, Summernote merece ser revisado.</p> <p><strong><a href="https://summernote.org/" target="_blank" rel="noopener noreferrer">Obtenga una demostración de Summernote</a></strong></p> <h3>6. Froala</h3> <p>Froala es un hermoso editor HTML WYSIWYG de código abierto escrito en JavaScript. Es una de las herramientas más populares de esta lista y su popularidad entre los desarrolladores se puede atribuir a su fácil integración y diseño limpio.</p> <p>Froala es un editor muy poderoso en sí mismo y la gran cantidad de complementos solo ha aumentado lo mismo. Algunos de ellos incluyen un editor de imágenes avanzado, emoticonos, corrector ortográfico y es fácil incluso crear su propio complemento. También se puede acceder a todas las herramientas con el editor en línea, que es extremadamente conveniente.</p> <p>Como TinyMCE, <a href="https://www.froala.com/wysiwyg-editor/pricing" target="_blank" rel="noopener">Froala está disponible en muchos sabores</a>, pero incluso la versión gratuita tiene mucho impacto. La única diferencia es que no obtendrá el código fuente completo ni el soporte técnico.</p> <p><img decoding="async" loading="lazy" class="border aligncenter wp-image-34919 size-full" src="https://www.howtodo.es/wp-content/uploads/2022/08/Froala.jpg" alt="Froala WYSIWYG HTML editor de código abierto" width="677" height="394" ></p> <p><strong>Ventajas:</strong></p> <ul> <li>Editor ligero y potente</li> <li>Edición en línea</li> <li>Gran cantidad de complementos</li> </ul> <p><strong>Contras:</strong></p> <ul> <li>No es ideal para aplicaciones/sitios web móviles híbridos</li> </ul> <p><strong>Veredicto:</strong><br />Froala es rápido y liviano con una hermosa interfaz de usuario, pero aun así logra brindar todas las funciones que uno podría estar buscando en un editor HTML WYSIWYG. Si está bien sin el código fuente y el soporte, la versión gratuita le servirá bien, de lo contrario, sabrá qué hacer.</p> <p><a href="https://www.froala.com/wysiwyg-editor/examples" target="_blank" rel="noopener noreferrer"><strong>Obtener Froala</strong></a></p> <h3>7. Editor de CK</h3> <p>CKEditor es extremadamente popular entre los usuarios por ser un editor HTML WYSIWYG de código abierto bellamente diseñado. Viene con más de 21k pruebas para ayudarlo a aprender HTML en un diseño amigable. La documentación detallada está allí para ayudarlo a perfeccionar aún más sus habilidades. Algunos de los nombres más importantes de la industria tecnológica confían en él.</p> <p>Tenga en cuenta que deberá mantener intactos los avisos de derechos de autor en cada archivo y no eliminar el archivo LICENSE.md ubicado en la carpeta de instalación de CKEditor. Eso no es un inconveniente, especialmente cuando obtienes tanto valor a cambio.</p> <p>Hay soporte para complementos, @menciones, emojis, navegadores heredados e incluso autocompletar, lo que puede ahorrar mucho tiempo.</p> <p><img decoding="async" loading="lazy" class="border aligncenter wp-image-57474 size-full" src="https://www.howtodo.es/wp-content/uploads/2022/08/WYSIWYG-HTML-Editor-Open-Source-7.png" alt="Interfaz de usuario de CKEditor" width="937" height="294" ></p> <p><strong>Ventajas:</strong></p> <ul> <li>Documentación detallada, pruebas, preguntas.</li> <li>Colaborar y @mencionar</li> <li>Autocompletar</li> </ul> <p><strong>Contras:</strong></p> <p><strong><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Obtener CKEditor</a></strong></p> <p><strong>Menciones honoríficas:</strong></p> <p>1. <a href="https://github.com/yabwe/medium-editor" target="_blank" rel="noopener noreferrer">MedioEditor</a> es un clon de código abierto del editor WYSIWYG en línea para Medium.com. Es muy simple, ligero y viene sin dependencias. Aunque no es tan poderoso, podría funcionar como una excelente herramienta de edición en línea para documentos de texto o relacionados con texto.</p> <p>2. Átomos <a href="https://atom.io/packages/atom-html-preview" target="_blank" rel="noopener noreferrer">Paquete de vista previa HTML</a> le permite agregar un panel de vista previa en el que puede tener una vista previa en vivo de su código HTML, lo que puede ser muy útil para los desarrolladores. Si bien esto definitivamente no es para principiantes, es un gran paquete para agregar a su flujo de trabajo existente si ya programa en HTML.</p> <h3>El mejor editor HTML WYSIWYG de código abierto</h3> <p>Si bien HTML sigue siendo la forma más poderosa de crear un sitio web y es posible hacer cosas mucho más complejas con él, los editores WYSIWYG se han asegurado un lugar propio. Aprender a codificar requiere una gran inversión de tiempo y energía y puede que no tenga sentido para todos. Si tiene experiencia previa en programación y no tiene tiempo para aprender, puede salirse con la suya utilizando un editor HTML WYSIWYG de código abierto.</p> <p><strong>Lea también:</strong> <a href="https://www.howtodo.es/navegador-de-codigo-abierto-para-android/ ">7 Mejor navegador de código abierto para Android (2018)</a></p> </p></div> </div></div><div id="brxe-xbqvbc" class="brxe-container bricks-lazy-hidden"><div id="brxe-cuvoac" class="brxe-container bricks-lazy-hidden"><h3 id="brxe-bimobn" class="brxe-heading">ÚLTIMAS ENTRADAS</h3><div id="brxe-teikic" class="brxe-divider horizontal"><div class="line"></div></div><div id="brxe-uceeum" data-script-id="uceeum" class="brxe-posts"><ul class="bricks-layout-wrapper" data-layout="grid"><li class="bricks-layout-item repeater-item brxe-uceeum"><div class="bricks-layout-inner"><div class="image-wrapper"><div class="image css-filter bricks-lazy-hidden bricks-lazy-load-isotope" role="img" aria-label data-style="background-image: url(https://www.howtodo.es/wp-content/uploads/2023/07/Fixes-for-Email-Not-Syncing-on-Android.jpg)"></div></div><div class="content-wrapper"><h3 class="dynamic" data-field-id="eac10b"><a href="https://www.howtodo.es/arreglos-para-correo-electronico-no-sincronizado-en-android/" aria-label="Leer más sobre 15 correcciones para el correo electrónico que no se sincroniza en Android">15 correcciones para el correo electrónico que no se sincroniza en Android</a></h3><div class="dynamic" data-field-id="c8e36e">101 Todos hemos estado en ese estado en el que esperamos recibir un correo electrónico importante, solo para descubrir más…</div></div></div></li><li class="bricks-layout-item repeater-item brxe-uceeum"><div class="bricks-layout-inner"><div class="image-wrapper"><div class="image css-filter bricks-lazy-hidden bricks-lazy-load-isotope" role="img" aria-label data-style="background-image: url(https://www.howtodo.es/wp-content/uploads/2023/07/login-to-Instagram-without-verification-code.jpg)"></div></div><div class="content-wrapper"><h3 class="dynamic" data-field-id="eac10b"><a href="https://www.howtodo.es/como-iniciar-sesion-en-instagram-sin-codigo-de-verificacion/" aria-label="Leer más sobre Cómo iniciar sesión en Instagram sin código de verificación">Cómo iniciar sesión en Instagram sin código de verificación</a></h3><div class="dynamic" data-field-id="c8e36e">130 La autenticación de dos factores agrega seguridad adicional a su cuenta de Instagram y dificulta que los piratas informáticos…</div></div></div></li><li class="bricks-layout-item repeater-item brxe-uceeum"><div class="bricks-layout-inner"><div class="image-wrapper"><div class="image css-filter bricks-lazy-hidden bricks-lazy-load-isotope" role="img" aria-label data-style="background-image: url(https://www.howtodo.es/wp-content/uploads/2023/07/How-to-add-email-to-gmail.jpg)"></div></div><div class="content-wrapper"><h3 class="dynamic" data-field-id="eac10b"><a href="https://www.howtodo.es/como-agregar-correo-e-a-lista-de-contactos-en-gmail/" aria-label="Leer más sobre Cómo agregar un correo electrónico a la lista de contactos en Gmail">Cómo agregar un correo electrónico a la lista de contactos en Gmail</a></h3><div class="dynamic" data-field-id="c8e36e">95 Gmail no tiene una lista de contactos propia. Guarda la dirección de correo electrónico en la lista de contactos…</div></div></div></li><li class="bricks-layout-item repeater-item brxe-uceeum"><div class="bricks-layout-inner"><div class="image-wrapper"><div class="image css-filter bricks-lazy-hidden bricks-lazy-load-isotope" role="img" aria-label data-style="background-image: url(https://www.howtodo.es/wp-content/uploads/2023/07/9-Ways-to-Fix-Night-Light-Not-Working-on-Windows.jpg)"></div></div><div class="content-wrapper"><h3 class="dynamic" data-field-id="eac10b"><a href="https://www.howtodo.es/soluciones-para-la-luz-nocturna-que-no-funciona-en-windows/" aria-label="Leer más sobre 9 correcciones para la luz nocturna que no funciona en Windows">9 correcciones para la luz nocturna que no funciona en Windows</a></h3><div class="dynamic" data-field-id="c8e36e">122 La función Night Light en Windows 10 y 11 ajusta la pantalla para mostrar colores cálidos, especialmente bloqueando la…</div></div></div></li><li class="bricks-isotope-sizer brx-query-trail" data-query-element-id="uceeum" data-query-vars="{"post_type":["post"],"posts_per_page":4,"post_status":"publish","paged":1,"post__not_in":[3431],"error":"","m":"","p":0,"post_parent":"","subpost":"","subpost_id":"","attachment":"","attachment_id":0,"name":"","pagename":"","page_id":0,"second":"","minute":"","hour":"","day":0,"monthnum":0,"year":0,"w":0,"category_name":"","tag":"","cat":"","tag_id":"","author":"","author_name":"","feed":"","tb":"","meta_key":"","meta_value":"","preview":"","s":"","sentence":"","title":"","fields":"","menu_order":"","embed":"","category__in":[],"category__not_in":[],"category__and":[],"post__in":[],"post_name__in":[],"tag__in":[],"tag__not_in":[],"tag__and":[],"tag_slug__in":[],"tag_slug__and":[],"post_parent__in":[],"post_parent__not_in":[],"author__in":[],"author__not_in":[],"search_columns":[],"ignore_sticky_posts":false,"suppress_filters":false,"cache_results":true,"update_post_term_cache":true,"update_menu_item_cache":false,"lazy_load_term_meta":true,"update_post_meta_cache":true,"nopaging":false,"comments_per_page":"50","no_found_rows":false,"order":"DESC"}" data-page="1" data-max-pages="963"></li></ul></div></div></div></div><div id="brxe-chtoxc" class="brxe-container bricks-lazy-hidden"><h2 id="brxe-gxrlsg" class="brxe-heading">Entradas relacionadas</h2><div id="brxe-csfgkh" class="brxe-divider horizontal"><div class="line"></div></div><ul id="brxe-ozxnnq" class="brxe-related-posts bricks-related-posts"><li class="repeater-item"><a href="https://www.howtodo.es/mejores-text-expander-apps-para-macos/" class="post-thumbnail-wrapper css-filter"><div class="post-thumbnail-inner" role="img" aria-label="" style="background-image: url(https://www.howtodo.es/wp-content/uploads/2022/10/mac-2376101_640-300x169.jpg)"></div></a><div class="post-content"><div class="dynamic" data-field-id="f493bb">octubre 13, 2022</div><h3 class="dynamic" data-field-id="655886"><a href="https://www.howtodo.es/mejores-text-expander-apps-para-macos/" aria-label="Leer más sobre Las mejores aplicaciones de expansión de texto para MacOS">Las mejores aplicaciones de expansión de texto para MacOS</a>...</h3></div></li><li class="repeater-item"><a href="https://www.howtodo.es/formas-de-arreglar-app-o-app-store-missing-on-samsung-smart-tv/" class="post-thumbnail-wrapper css-filter"><div class="post-thumbnail-inner" role="img" aria-label="" style="background-image: url(https://www.howtodo.es/wp-content/uploads/2023/03/Samsung-TV-app-missing-300x169.jpg)"></div></a><div class="post-content"><div class="dynamic" data-field-id="f493bb">marzo 5, 2023</div><h3 class="dynamic" data-field-id="655886"><a href="https://www.howtodo.es/formas-de-arreglar-app-o-app-store-missing-on-samsung-smart-tv/" aria-label="Leer más sobre 9 correcciones para la aplicación o la tienda de aplicaciones que faltan en Samsung Smart TV">9 correcciones para la aplicación o la tienda de aplicaciones</a>...</h3></div></li><li class="repeater-item"><a href="https://www.howtodo.es/como-configurar-una-foto-para-llamadas-entrantes-en-iphone-y-android/" class="post-thumbnail-wrapper css-filter"><div class="post-thumbnail-inner" role="img" aria-label="" style="background-image: url(https://www.howtodo.es/wp-content/uploads/2023/07/Set-Incoming-Call-photo-300x169.jpg)"></div></a><div class="post-content"><div class="dynamic" data-field-id="f493bb">julio 16, 2023</div><h3 class="dynamic" data-field-id="655886"><a href="https://www.howtodo.es/como-configurar-una-foto-para-llamadas-entrantes-en-iphone-y-android/" aria-label="Leer más sobre Cómo configurar una foto para llamadas entrantes en iPhone y Android">Cómo configurar una foto para llamadas entrantes en iPhone y</a>...</h3></div></li><li class="repeater-item"><a href="https://www.howtodo.es/como-usar-airpods-con-ps4/" class="post-thumbnail-wrapper css-filter"><div class="post-thumbnail-inner" role="img" aria-label="" style="background-image: url(https://www.howtodo.es/wp-content/uploads/2022/09/Screenshot-2019-07-26-at-1.53.39-pm-300x167.jpg)"></div></a><div class="post-content"><div class="dynamic" data-field-id="f493bb">septiembre 2, 2022</div><h3 class="dynamic" data-field-id="655886"><a href="https://www.howtodo.es/como-usar-airpods-con-ps4/" aria-label="Leer más sobre Cómo conectar AirPods a PS4 (o cualquier auricular Bluetooth)">Cómo conectar AirPods a PS4 (o cualquier auricular Bluetooth)</a>...</h3></div></li></ul></div></main><footer id="brx-footer"><section id="brxe-mlizpc" class="brxe-section bricks-lazy-hidden"><div id="brxe-yaunzw" class="brxe-container bricks-lazy-hidden"><h5 id="brxe-zzlgxh" class="brxe-heading"><a href="https://www.howtodo.es/politica-de-privacidad/">Política de Privacidad</a></h5><h5 id="brxe-wqdfxe" class="brxe-heading"><a href="https://www.howtodo.es/aviso-legal/">Aviso legal</a></h5><h5 id="brxe-rkfsfw" class="brxe-heading"><a href="https://www.howtodo.es/politica-de-cookies/">Política de cookies</a></h5></div></section><section id="brxe-mthyic" class="brxe-section bricks-lazy-hidden"><div id="brxe-ssbaqc" class="brxe-container bricks-lazy-hidden"><h5 id="brxe-ykltug" class="brxe-heading">© Howtodo.es</h5></div></section></footer> <div id="cookies-eu-wrapper"> <div id="cookies-eu-banner" data-wait-remove="250" > <div id="cookies-eu-label"> Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. <a class="argpd-cookies-politica" rel="nofollow" id="cookies-eu-more" href="https://www.howtodo.es/personalizar-cookies/">Configurar y más información</a> </div> <div id="cookies-eu-buttons"> <button id="cookies-eu-reject" class="cookies-eu-reject">Rechazar</button> <button id="cookies-eu-accept" class="cookies-eu-accept">Aceptar</button></div> </div> </div> <div id="cookies-eu-banner-closed"> <span>Privacidad</span> </div> <script id='bricks-scripts-js-extra'> var bricksData = {"debug":"","locale":"es_ES","ajaxUrl":"https:\/\/www.howtodo.es\/wp-admin\/admin-ajax.php","restApiUrl":"https:\/\/www.howtodo.es\/wp-json\/bricks\/v1\/","nonce":"ce56061d02","formNonce":"568451e8f6","wpRestNonce":"6e1e80824a","postId":"3431","recaptchaIds":[],"animatedTypingInstances":[],"videoInstances":[],"splideInstances":[],"tocbotInstances":[],"swiperInstances":[],"queryLoopInstances":[],"interactions":[],"filterInstances":[],"isotopeInstances":[],"mapStyles":{"ultraLightWithLabels":{"label":"Ultra light with labels","style":"[ { \"featureType\": \"water\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#e9e9e9\" }, { \"lightness\": 17 } ] }, { \"featureType\": \"landscape\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#f5f5f5\" }, { \"lightness\": 20 } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#ffffff\" }, { \"lightness\": 17 } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"geometry.stroke\", \"stylers\": [ { \"color\": \"#ffffff\" }, { \"lightness\": 29 }, { \"weight\": 0.2 } ] }, { \"featureType\": \"road.arterial\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#ffffff\" }, { \"lightness\": 18 } ] }, { \"featureType\": \"road.local\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#ffffff\" }, { \"lightness\": 16 } ] }, { \"featureType\": \"poi\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#f5f5f5\" }, { \"lightness\": 21 } ] }, { \"featureType\": \"poi.park\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#dedede\" }, { \"lightness\": 21 } ] }, { \"elementType\": \"labels.text.stroke\", \"stylers\": [ { \"visibility\": \"on\" }, { \"color\": \"#ffffff\" }, { \"lightness\": 16 } ] }, { \"elementType\": \"labels.text.fill\", \"stylers\": [ { \"saturation\": 36 }, { \"color\": \"#333333\" }, { \"lightness\": 40 } ] }, { \"elementType\": \"labels.icon\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"transit\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#f2f2f2\" }, { \"lightness\": 19 } ] }, { \"featureType\": \"administrative\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#fefefe\" }, { \"lightness\": 20 } ] }, { \"featureType\": \"administrative\", \"elementType\": \"geometry.stroke\", \"stylers\": [ { \"color\": \"#fefefe\" }, { \"lightness\": 17 }, { \"weight\": 1.2 } ] } ]"},"blueWater":{"label":"Blue water","style":"[ { \"featureType\": \"administrative\", \"elementType\": \"labels.text.fill\", \"stylers\": [ { \"color\": \"#444444\" } ] }, { \"featureType\": \"landscape\", \"elementType\": \"all\", \"stylers\": [ { \"color\": \"#f2f2f2\" } ] }, { \"featureType\": \"poi\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"road\", \"elementType\": \"all\", \"stylers\": [ { \"saturation\": -100 }, { \"lightness\": 45 } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"simplified\" } ] }, { \"featureType\": \"road.arterial\", \"elementType\": \"labels.icon\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"transit\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"water\", \"elementType\": \"all\", \"stylers\": [ { \"color\": \"#46bcec\" }, { \"visibility\": \"on\" } ] } ]"},"lightDream":{"label":"Light dream","style":"[ { \"featureType\": \"landscape\", \"stylers\": [ { \"hue\": \"#FFBB00\" }, { \"saturation\": 43.400000000000006 }, { \"lightness\": 37.599999999999994 }, { \"gamma\": 1 } ] }, { \"featureType\": \"road.highway\", \"stylers\": [ { \"hue\": \"#FFC200\" }, { \"saturation\": -61.8 }, { \"lightness\": 45.599999999999994 }, { \"gamma\": 1 } ] }, { \"featureType\": \"road.arterial\", \"stylers\": [ { \"hue\": \"#FF0300\" }, { \"saturation\": -100 }, { \"lightness\": 51.19999999999999 }, { \"gamma\": 1 } ] }, { \"featureType\": \"road.local\", \"stylers\": [ { \"hue\": \"#FF0300\" }, { \"saturation\": -100 }, { \"lightness\": 52 }, { \"gamma\": 1 } ] }, { \"featureType\": \"water\", \"stylers\": [ { \"hue\": \"#0078FF\" }, { \"saturation\": -13.200000000000003 }, { \"lightness\": 2.4000000000000057 }, { \"gamma\": 1 } ] }, { \"featureType\": \"poi\", \"stylers\": [ { \"hue\": \"#00FF6A\" }, { \"saturation\": -1.0989010989011234 }, { \"lightness\": 11.200000000000017 }, { \"gamma\": 1 } ] } ]"},"blueEssence":{"label":"Blue essence","style":"[ { \"featureType\": \"landscape.natural\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"visibility\": \"on\" }, { \"color\": \"#e0efef\" } ] }, { \"featureType\": \"poi\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"visibility\": \"on\" }, { \"hue\": \"#1900ff\" }, { \"color\": \"#c0e8e8\" } ] }, { \"featureType\": \"road\", \"elementType\": \"geometry\", \"stylers\": [ { \"lightness\": 100 }, { \"visibility\": \"simplified\" } ] }, { \"featureType\": \"road\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"transit.line\", \"elementType\": \"geometry\", \"stylers\": [ { \"visibility\": \"on\" }, { \"lightness\": 700 } ] }, { \"featureType\": \"water\", \"elementType\": \"all\", \"stylers\": [ { \"color\": \"#7dcdcd\" } ] } ]"},"appleMapsesque":{"label":"Apple maps-esque","style":"[ { \"featureType\": \"landscape.man_made\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#f7f1df\" } ] }, { \"featureType\": \"landscape.natural\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#d0e3b4\" } ] }, { \"featureType\": \"landscape.natural.terrain\", \"elementType\": \"geometry\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"poi\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"poi.business\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"poi.medical\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#fbd3da\" } ] }, { \"featureType\": \"poi.park\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#bde6ab\" } ] }, { \"featureType\": \"road\", \"elementType\": \"geometry.stroke\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"road\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#ffe15f\" } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"geometry.stroke\", \"stylers\": [ { \"color\": \"#efd151\" } ] }, { \"featureType\": \"road.arterial\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#ffffff\" } ] }, { \"featureType\": \"road.local\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"black\" } ] }, { \"featureType\": \"transit.station.airport\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#cfb2db\" } ] }, { \"featureType\": \"water\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#a2daf2\" } ] } ]"},"paleDawn":{"label":"Pale dawn","style":"[ { \"featureType\": \"administrative\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"on\" }, { \"lightness\": 33 } ] }, { \"featureType\": \"landscape\", \"elementType\": \"all\", \"stylers\": [ { \"color\": \"#f2e5d4\" } ] }, { \"featureType\": \"poi.park\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#c5dac6\" } ] }, { \"featureType\": \"poi.park\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"on\" }, { \"lightness\": 20 } ] }, { \"featureType\": \"road\", \"elementType\": \"all\", \"stylers\": [ { \"lightness\": 20 } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#c5c6c6\" } ] }, { \"featureType\": \"road.arterial\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#e4d7c6\" } ] }, { \"featureType\": \"road.local\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#fbfaf7\" } ] }, { \"featureType\": \"water\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"on\" }, { \"color\": \"#acbcc9\" } ] } ]"},"neutralBlue":{"label":"Neutral blue","style":"[ { \"featureType\": \"water\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#193341\" } ] }, { \"featureType\": \"landscape\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#2c5a71\" } ] }, { \"featureType\": \"road\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#29768a\" }, { \"lightness\": -37 } ] }, { \"featureType\": \"poi\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#406d80\" } ] }, { \"featureType\": \"transit\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#406d80\" } ] }, { \"elementType\": \"labels.text.stroke\", \"stylers\": [ { \"visibility\": \"on\" }, { \"color\": \"#3e606f\" }, { \"weight\": 2 }, { \"gamma\": 0.84 } ] }, { \"elementType\": \"labels.text.fill\", \"stylers\": [ { \"color\": \"#ffffff\" } ] }, { \"featureType\": \"administrative\", \"elementType\": \"geometry\", \"stylers\": [ { \"weight\": 0.6 }, { \"color\": \"#1a3541\" } ] }, { \"elementType\": \"labels.icon\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"poi.park\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#2c5a71\" } ] } ]"},"avocadoWorld":{"label":"Avocado world","style":"[ { \"featureType\": \"water\", \"elementType\": \"geometry\", \"stylers\": [ { \"visibility\": \"on\" }, { \"color\": \"#aee2e0\" } ] }, { \"featureType\": \"landscape\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#abce83\" } ] }, { \"featureType\": \"poi\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#769E72\" } ] }, { \"featureType\": \"poi\", \"elementType\": \"labels.text.fill\", \"stylers\": [ { \"color\": \"#7B8758\" } ] }, { \"featureType\": \"poi\", \"elementType\": \"labels.text.stroke\", \"stylers\": [ { \"color\": \"#EBF4A4\" } ] }, { \"featureType\": \"poi.park\", \"elementType\": \"geometry\", \"stylers\": [ { \"visibility\": \"simplified\" }, { \"color\": \"#8dab68\" } ] }, { \"featureType\": \"road\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"visibility\": \"simplified\" } ] }, { \"featureType\": \"road\", \"elementType\": \"labels.text.fill\", \"stylers\": [ { \"color\": \"#5B5B3F\" } ] }, { \"featureType\": \"road\", \"elementType\": \"labels.text.stroke\", \"stylers\": [ { \"color\": \"#ABCE83\" } ] }, { \"featureType\": \"road\", \"elementType\": \"labels.icon\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"road.local\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#A4C67D\" } ] }, { \"featureType\": \"road.arterial\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#9BBF72\" } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"geometry\", \"stylers\": [ { \"color\": \"#EBF4A4\" } ] }, { \"featureType\": \"transit\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"administrative\", \"elementType\": \"geometry.stroke\", \"stylers\": [ { \"visibility\": \"on\" }, { \"color\": \"#87ae79\" } ] }, { \"featureType\": \"administrative\", \"elementType\": \"geometry.fill\", \"stylers\": [ { \"color\": \"#7f2200\" }, { \"visibility\": \"off\" } ] }, { \"featureType\": \"administrative\", \"elementType\": \"labels.text.stroke\", \"stylers\": [ { \"color\": \"#ffffff\" }, { \"visibility\": \"on\" }, { \"weight\": 4.1 } ] }, { \"featureType\": \"administrative\", \"elementType\": \"labels.text.fill\", \"stylers\": [ { \"color\": \"#495421\" } ] }, { \"featureType\": \"administrative.neighborhood\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"off\" } ] } ]"},"gowalla":{"label":"Gowalla","style":"[ { \"featureType\": \"administrative.land_parcel\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"landscape.man_made\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"poi\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"road\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"simplified\" }, { \"lightness\": 20 } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"geometry\", \"stylers\": [ { \"hue\": \"#f49935\" } ] }, { \"featureType\": \"road.highway\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"simplified\" } ] }, { \"featureType\": \"road.arterial\", \"elementType\": \"geometry\", \"stylers\": [ { \"hue\": \"#fad959\" } ] }, { \"featureType\": \"road.arterial\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"road.local\", \"elementType\": \"geometry\", \"stylers\": [ { \"visibility\": \"simplified\" } ] }, { \"featureType\": \"road.local\", \"elementType\": \"labels\", \"stylers\": [ { \"visibility\": \"simplified\" } ] }, { \"featureType\": \"transit\", \"elementType\": \"all\", \"stylers\": [ { \"visibility\": \"off\" } ] }, { \"featureType\": \"water\", \"elementType\": \"all\", \"stylers\": [ { \"hue\": \"#a1cdfc\" }, { \"saturation\": 30 }, { \"lightness\": 49 } ] } ]"}},"facebookAppId":"","headerPosition":"top","offsetLazyLoad":"300","baseUrl":"https:\/\/www.howtodo.es\/mejor-wysiwyg-html-editor-open-source\/","useQueryFilter":"","pageFilters":[]}; </script> <script src='https://www.howtodo.es/wp-content/themes/bricks/assets/js/bricks.min.js?ver=1707893548' id='bricks-scripts-js'></script> <script type="text/javascript"> jQuery(function ($) { 'use strict'; window.Adapta_RGPD = window.Adapta_RGPD || {}; Adapta_RGPD.getCookie= function(name) { var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return v ? v[2] : null; } Adapta_RGPD.setCookie= function (name, value) { var date = new Date(); date.setTime(date.getTime() + this.cookieTimeout); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }; Adapta_RGPD.deleteCookie = function (name) { var hostname = document.location.hostname.replace(/^www\./, ''); var nacked = hostname.replace(/^[^.]+\./g, ""); var commonSuffix = '; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/'; // remove cookies that match name document.cookie = name + '=; domain=.' + hostname + commonSuffix; document.cookie = name + '=; domain=.' + nacked + commonSuffix; document.cookie = name + '=' + commonSuffix; // search and remove all cookies starts with name document.cookie.split(';') .filter(function(el) { return el.trim().indexOf(name) === 0; }) .forEach(function(el) { var [k,v] = el.split('='); document.cookie = k + '=; domain=.' + hostname + commonSuffix; document.cookie = k + '=; domain=.' + nacked + commonSuffix; document.cookie = k + '=' + commonSuffix; }) }; Adapta_RGPD.onlyUnique= function(value, index, self) { return self.indexOf(value) === index; }; Adapta_RGPD.removeItemOnce = function(arr, value) { var index = arr.indexOf(value); if (index > -1) { arr.splice(index, 1); } return arr; }; // load events. Adapta_RGPD.loadEvents= function(){ $("[id^='custom-cookies-accept']").click(function(){ var consents= new Array(); var value= Adapta_RGPD.getCookie('hasConsents'); if ( null != value && value.length) { consents = value.split("+") } var consent = this.dataset.consent; consents.push(consent) var unique= consents.filter(Adapta_RGPD.onlyUnique); Adapta_RGPD.setCookie('hasConsents', unique.join('+')); Adapta_RGPD.setCookie('hasConsent', true); }); $("[id^='custom-cookies-reject'],#custom-cookies-eu-reject,#cookies-eu-reject").click(function(){ const trackingCookiesNames = ['__utma', '__utmb', '__utmc', '__utmt', '__utmv', '__utmz', '_ga', '_gat', '_gid', '_fbp']; var value= Adapta_RGPD.getCookie('hasConsents'); if ( null == value ) { return } // consent is the consent to remove. Ej ANLT var consent = ('undefined' !== typeof this.dataset && this.dataset.hasOwnProperty('consent'))?this.dataset.consent:null; if (consent != null) { var consents = value.split("+") consents=Adapta_RGPD.removeItemOnce(consents, consent) Adapta_RGPD.setCookie('hasConsents', consents.join('+')); } if ( 'ANLTCS' == consent || null == consent ) { trackingCookiesNames.map(Adapta_RGPD.deleteCookie); } // update api consent var consentUUIDCookie = Adapta_RGPD.getCookie('argpd_consentUUID'); if ( null == consentUUIDCookie || consentUUIDCookie.length == 0) { return; } var ajaxurl = 'https://www.howtodo.es/wp-admin/admin-ajax.php'; var data = { action: 'cookie_consent', security: '449100e7de', uri: window.location.href, 'update': 1, 'statement': $("#cookies-eu-label").text(), 'purpose-necessary': 1, 'purpose-non-necessary': 0, 'purpose-analytics': 0, 'purpose-marketing': 0, 'purpose-advertisement': 0, }; $.post( ajaxurl, data, function(response) { if ( undefined !== response.success && false === response.success ) { return; } }); }); // reject all event $("#cookies-eu-banner-closed, .cookies-eu-banner-closed" ).click(function(){ var date = new Date(); date.setTime(date.getTime() + 33696000000); document.cookie = 'hasConsent' + '=' + 'configure' + ';expires=' + date.toUTCString() + ';path=/'; window.location.reload(); }); // toggle first layer privacy } // init Adapta_RGPD.init = function(){ jQuery(document).ready(function($) { // Prevent for search engine execute ajax function. var bots = /bot|crawler|spider|crawling/i; var isBot = bots.test(navigator.userAgent); if ( isBot ) { return; } // event if cookies-reload option // code to launch when user accepts cookies new CookiesEuBanner(function (update=false) { var ajaxurl = 'https://www.howtodo.es/wp-admin/admin-ajax.php'; var data = { action: 'cookie_consent', security: '449100e7de', uri: window.location.href, 'update': (update == true)?1:0, 'statement': $("#cookies-eu-label").text(), 'purpose-necessary': 1, 'purpose-non-necessary': 0, 'purpose-analytics': '1', 'purpose-marketing': '0', 'purpose-advertisement': '1', }; $.post( ajaxurl, data, function(response) { if ( undefined !== response.success && false === response.success ) { return; } var data = jQuery.parseJSON(response); if (data == null) { return } // set cookie argpd_consentUUID if (data.hasOwnProperty('uuid')) { Adapta_RGPD.setCookie('argpd_consentUUID', data['uuid']); } // append scripts if (data.hasOwnProperty('scripts-reject')) { var scripts = data['scripts-reject'].split(","); scripts.forEach(function(src){ var script = document.createElement( 'script' ); script.setAttribute( "src", src ); document.getElementsByTagName( "head" )[0].appendChild( script ); }); } }); }, true); Adapta_RGPD.loadEvents(); }); } Adapta_RGPD.init(); }); </script> </body></html>