jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas de HTML y accesibilidad

Gratis Generador contenteditable=plaintext-only

Genere HTML accesible con contenteditable=plaintext-only para entrada de texto plano sin formato enriquecido.

Cargando herramienta...

Qué es Generador contenteditable=plaintext-only?

El atributo contenteditable=plaintext-only crea un elemento HTML que los usuarios pueden editar, pero a diferencia de contenteditable=true que acepta formato de texto enriquecido (negrita, cursiva, colores, fuentes), plaintext-only elimina todo el formato al pegar. Cuando un usuario copia texto formateado de Word, Google Docs o una página web y lo pega en un editor plaintext-only, el contenido pegado es solo texto plano: sin etiquetas HTML, sin estilos inline, sin formato de fuente. Este comportamiento está integrado en el navegador y no requiere JavaScript.

Respuesta rápida

Use contenteditable=plaintext-only para crear regiones editables que acepten solo texto plano: al pegar contenido formateado se eliminan todas las etiquetas HTML y estilos inline automáticamente. Sin necesidad de JavaScript. Compatible con Chrome 120+, Edge 120+, Safari 17.4+ y Firefox 136+. Degrada correctamente a edición de texto enriquecido en navegadores antiguos. El HTML generado incluye CSS de placeholder, estilos de foco, atributos ARIA y detección de respaldo opcional.

Last updated: 2026-06-01

Limitaciones

  • No compatible en Firefox anterior a la versión 136. El atributo degrada a contenteditable=true correctamente, por lo que los usuarios de Firefox antiguos ven un editor de texto enriquecido en lugar de un editor de texto plano. Añada un interceptor de pegado JavaScript como red de seguridad para estos usuarios.
  • plaintext-only es un enfoque de todo o nada: no permite algo de formato (como saltos de línea) mientras bloquea otros (como negrita o fuentes). Para filtrado selectivo, necesita una solución personalizada con el evento beforeinput.
  • Las implementaciones del navegador pueden diferir en casos límite: por ejemplo, cómo se manejan los espacios finales, múltiples espacios o caracteres Unicode inusuales al pegar. Pruebe con los tipos de contenido que sus usuarios tienen más probabilidades de pegar.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el modo de editor: plaintext-only (elimina todo el formato al pegar) o contenteditable regular (preserva texto enriquecido). Genere HTML para cualquier modo o ambos con una comparación lado a lado.
  2. Configure el texto de placeholder que aparece cuando el editor está vacío, y personalice el color y estilo CSS del placeholder para que coincida con su diseño.
  3. Establezca estilos de foco: outline, color de borde o box-shadow que se activa cuando el editor recibe el foco. Incluya etiquetas ARIA para accesibilidad de lectores de pantalla.
  4. Copie el marcado HTML generado. La herramienta proporciona un fragmento completo e independiente con CSS asociado que maneja la detección de respaldo para navegadores que aún no soportan plaintext-only.

Para qué puedes usarla

  • Campos de comentarios y foros de discusión donde los usuarios no deberían poder pegar texto formateado que rompa el diseño de la página o introduzca HTML oculto.
  • Entradas de fragmentos de código o editores de configuración donde se espera texto sin formato y el formato enriquecido es ruido no deseado.
  • Herramientas internas de toma de notas o descripciones de texto plano en CMS donde el formato añade complejidad sin beneficio.

Casos de uso

Ejemplos prácticos

Ejemplo

Campo de comentario de blog en texto plano

Un blog desea evitar que los comentaristas peguen texto formateado con etiquetas HTML ocultas que podrían romper el diseño o introducir vectores XSS. Use contenteditable=plaintext-only para el input de comentarios. Cuando un usuario copia un párrafo formateado de Word y lo pega, el navegador elimina automáticamente todas las etiquetas bold, italic, font y color: el resultado es texto plano limpio.

Ejemplo

Comparación de editores de configuración

Una herramienta de desarrollo necesita dos modos de entrada: un editor WYSIWYG para descripciones enriquecidas (contenteditable=true) y un campo de texto plano para valores de configuración (contenteditable=plaintext-only). Use el HTML generado para mostrar ambos modos lado a lado para que los usuarios entiendan la diferencia inmediatamente.

Errores comunes

  • Usar contenteditable=true para campos de texto plano y escribir interceptores de pegado en JavaScript para eliminar el formato: el navegador lo hace por usted con plaintext-only, ahorrando código, mantenimiento y errores de casos límite.
  • Olvidar añadir atributos ARIA y etiquetas accesibles a las regiones contenteditable: los lectores de pantalla tratan los elementos editables como controles de formulario y requieren etiquetado adecuado mediante aria-label o aria-labelledby.
  • No probar el comportamiento de respaldo en navegadores antiguos: Firefox añadió plaintext-only en la versión 136. Sin un respaldo, los usuarios de versiones antiguas obtienen un editor de texto enriquecido regular.

Verificación

  1. Abra el HTML generado en Chrome o Safari. Escriba algo de texto, luego copie un párrafo formateado de una página web o documento de Word y péguelo en el editor. Verifique que todo el formato (negrita, cursiva, colores, fuentes, enlaces) se elimine y solo quede texto plano.
  2. Pruebe la misma operación de pegado en Firefox 135 o anterior para confirmar el comportamiento de respaldo: el editor debería funcionar como contenteditable=true (preservando el formato) ya que plaintext-only no es compatible. Si añadió el respaldo JavaScript opcional, verifique que intercepte los eventos de pegado en navegadores antiguos.

FAQ

Preguntas sobre Generador contenteditable=plaintext-only

¿En qué se diferencia contenteditable plaintext-only de contenteditable true?

contenteditable=true permite a los usuarios editar contenido HTML y pegar texto formateado, preservando negrita, cursiva, listas, enlaces y estilos inline. contenteditable=plaintext-only elimina todo el formato al pegar, incluyendo etiquetas HTML, estilos inline y texto enriquecido de Word o páginas web. El comportamiento de edición subyacente es idéntico: solo difiere el manejo del pegado. plaintext-only se comporta como si un interceptor de pegado JavaScript ejecutara document.execCommand(insertText) cada vez, pero sin código requerido.

¿Qué navegadores soportan contenteditable=plaintext-only?

A partir de 2026, plaintext-only es Baseline 2025 compatible con Chrome 120+, Edge 120+, Safari 17.4+ y Firefox 136+. Esto cubre aproximadamente el 85% del uso global de navegadores. Para navegadores antiguos, el atributo degrada correctamente a contenteditable=true (texto enriquecido). El HTML generado incluye detección de respaldo para que pueda añadir un interceptor de pegado JavaScript como red de seguridad para navegadores antiguos.

¿Puedo permitir algo de formato pero bloquear otro con plaintext-only?

No: plaintext-only es un comportamiento de todo o nada. Si necesita filtrado selectivo (por ejemplo, permitir saltos de línea pero bloquear etiquetas de fuente), debe escribir un manejador de pegado personalizado con el evento beforeinput o usar una biblioteca como Quill o TipTap que proporcionen sanitización de pegado configurable. plaintext-only está diseñado para casos donde desea cero formato, no filtrado personalizado.

¿contenteditable plaintext-only previene XSS?

Reduce un vector XSS: el HTML pegado que contiene etiquetas script, manejadores de eventos u otro marcado malicioso se reduce a texto plano, por lo que esas etiquetas nunca entran al DOM. Sin embargo, las regiones contenteditable siguen siendo elementos HTML editables y pueden ser objetivo de otros vectores de ataque. Siempre valide y sanitice el contenido del lado del servidor antes de almacenarlo o mostrarlo, independientemente del modo contenteditable.

Herramientas relacionadas

Más herramientas de html y accesibilidad

Prueba también

Prueba también

Herramientas de CSS y diseño

Generador de carruseles CSS

Genera el marcado de un carrusel CSS nativo con scroll-snap, botones de desplazamiento, marcadores y una estructura de lista accesible. No requiere JavaScript.

Abrir herramienta