Herramientas de desarrollo · Editor HTML WYSIWYG
Qué sucede cuando pega desde Word o Google Docs en un editor web
· Cómo funciona
html contento limpieza de texto
Explica qué contienen los pegados de texto enriquecido, desde estilos mso hasta elementos envolventes y pilas de fuentes, y muestra cómo leer el marcado resultante antes de que llegue a su sitio.
Se veía bien en Word: se abre con un artículo pegado cuyo espaciado y fuentes luchan contra el diseño del sitio.
Un párrafo copiado de un procesador de textos puede verse pulido en la fuente y llegar con fuentes, espacios y envoltorios que entran en conflicto con un sitio. ToolAcre no conserva esa presentación al por mayor. Su detector de pegado intercepta la operación antes de que se inserte el marcado enriquecido original y elige en su lugar una representación filtrada.
La evidencia importante es la vista original, no si la primera impresión visual se parece al documento original. El editor es intencionalmente limitado: los encabezados, párrafos, énfasis, listas, citas, elementos similares a códigos y enlaces pueden sobrevivir, mientras que los contenedores de diseño, los nombres de clases, los identificadores y los atributos de estilo en línea no pertenecen a su contrato de salida.
El portapapeles contiene más que texto: explica que una copia de texto enriquecido incluye una versión HTML junto con texto sin formato.
Un portapapeles puede exponer `text/html` y `text/plain` para una operación de copia. El guía pide ambos. Cuando existe una carga útil HTML, desinfecta esa cadena e inserta el fragmento reescrito con `insertHTML`; solo cuando no hay HTML enriquecido se inserta la carga útil simple con `insertText`.
Esa precedencia está comprobada por código para este panel, no es una declaración universal sobre cada aplicación. Explica por qué una pasta rica puede conservar su apariencia y perder su apariencia. La aplicación de origen escribió el HTML del portapapeles, pero la lista de permitidos de ToolAcre decide qué parte se admite en la superficie editable.
Lo que este editor elimina del pegado enriquecido: elementos, atributos y comentarios no admitidos
Los elementos no admitidos se manejan de dos maneras. Los envoltorios ordinarios desconocidos se desenvuelven para que sus palabras permanezcan, mientras que script, estilo, iframe, formulario, SVG, MathML y otros contenedores riesgosos o que no son de edición se eliminan junto con su contenido. Los comentarios y tipos de documentos también se descartan en lugar de incluirse en el borrador.
Los atributos miran hacia una segunda puerta. Los atributos de clase, identificación, estilo, datos y todos los controladores de eventos se eliminan porque los atributos permitidos se nombran por elemento. Esto significa que los nombres de clases de origen específico y la presentación en línea no pueden luchar contra la hoja de estilo de destino después de que ToolAcre haya filtrado el pegado, aunque el estilo de origen útil también puede desaparecer.
Por qué los contenedores y estilos específicos de la fuente no sobreviven a la lista de permitidos
El repositorio no proporciona elementos capturados de Word o Google Docs, por lo que este artículo no inventa clases `mso-` exactas, identificadores internos o secuencias contenedoras para versiones particulares. Puede indicar la consecuencia probada por la lista de permitidos: las clases y estilos se eliminan independientemente de qué aplicación fuente los proporcionó.
Esa regla independiente de la fuente es una guía editorial más sólida que un catálogo frágil. Inspeccione el aviso de eliminación después de pegarlo. Registra motivos únicos, como un contenedor no admitido, un atributo prohibido o una URL rechazada. El informe te cuenta lo que esta implementación descartó sin pretender identificar la aplicación que generó originalmente cada fragmento.
Ejemplo resuelto: pegue tres párrafos y lea el marcado filtrado
Copie tres párrafos cortos, poniendo la oración del medio en negrita y la última en una lista. Después de pegar, cambie al modo fuente. Los elementos de párrafo, strong, ul y li están dentro de la lista de permitidos, mientras que los divs circundantes se desenvuelven y los atributos de estilo desaparecen. Las etiquetas heredadas b e i se normalizan a fuerte y em.
Ahora agregue un atributo de evento no seguro en una muestra de fuente desechable y regrese al modo visual. El atributo se elimina antes de que esa fuente se convierta en DOM. Esto demuestra un límite de edición, no una publicación segura de envíos hostiles. El proyecto advierte explícitamente sobre las diferencias entre analizadores y requiere un desinfectante del lado del servidor adecuado para contenido que no es de confianza.
El pegado de texto sin formato se utiliza solo cuando el portapapeles no proporciona ningún tipo de HTML
La inserción de texto sin formato es una opción alternativa, no un comando de “pegar sin formato” seleccionable por el usuario en esta barra de herramientas. Si el portapapeles proporciona HTML, ToolAcre toma esa rama. Un acceso directo del navegador o del sistema operativo puede exponer un pegado simple, pero el repositorio no define ni promete un comportamiento de acceso directo específico.
Cuando solo hay texto disponible, `insertText` le pide al navegador que coloque esos caracteres en el cursor. Cualquier estructura de párrafo creada posteriormente permanece sujeta al comportamiento de edición del navegador. Utilice la vista de código fuente para agregar encabezados o listas deliberadas en lugar de asumir que los saltos de línea de otra aplicación se convierten automáticamente en la estructura que su CMS espera.
Lo que esto no cubre: reglas de limpieza automática, filtros de pegado específicos de CMS o conservación de cambios rastreados.
Este flujo de trabajo no conserva los cambios, comentarios, diseño de página, fuentes, colores, tablas o imágenes rastreados. Las imágenes están deliberadamente ausentes porque una imagen permitida crea una solicitud saliente y una superficie de manejo de errores. El editor tampoco tiene un perfil de limpieza específico de fuente o un interruptor que prometa fidelidad a una suite ofimática.
Pegar localmente no prueba que el destino final aceptará el mismo subconjunto. Un CMS puede eliminar más etiquetas, reescribir enlaces o imponer su propia política. Compare la salida del editor con la documentación de destino y conserve una copia original cuando la pérdida de un formato no compatible elimine información en lugar de una mera presentación.
Conclusión: mire antes de publicar: resume el hábito de inspección y cómo el editor HTML WYSIWYG de ToolAcre le permite pegar localmente y ver el marcado antes de que vaya a ninguna parte.
Mire antes de publicar: pegue un fragmento representativo y no confidencial, lea la advertencia de eliminación, examine la fuente y obtenga una vista previa del resultado filtrado. ToolAcre proporciona una lista de permitidos explícita en lugar de llevar silenciosamente una presentación extranjera a su sitio. Eso hace que la limpieza sea visible, pero no certifica que HTML arbitrario sea seguro.
Si la estructura esencial desapareció, reconstrúyala con títulos, párrafos, listas, énfasis y enlaces compatibles. Si el objetivo acepta menos, simplifique más allí. El artefacto correcto no es la imitación visual más cercana del documento fuente; se revisa el marcado cuyo significado y política de destino se entienden.