Herramientas para desarrolladores · Editor HTML WYSIWYG
Cómo un editor WYSIWYG convierte el formato en HTML: contenteditable explicado
· Cómo funciona
HTML contento flujo de trabajo del desarrollador
Explica el atributo contenteditable que hace que cualquier elemento sea editable, cómo el navegador modifica el DOM a medida que escribe y formatea, y cómo ese DOM se convierte en el HTML que usted copia.
Presionaste negrita; ¿De dónde vino el <strong>? — se abre con el espacio entre hacer clic en un botón y ver el marcado
Un botón de la barra de herramientas etiquetado como Negrita parece un pincel, pero el navegador debe representar el resultado en un árbol de documentos. Una frase seleccionada puede convertirse en un elemento <b> o <strong> según el comando y el motor de edición. La tarea del desarrollador es convertir esas mutaciones específicas del navegador en HTML que otra página pueda leer sin aceptar todas las etiquetas o atributos peligrosos. Lo que ves en la pantalla es un DOM editable, no un archivo de procesamiento de textos con una capa de formato independiente.
contenteditable: el atributo que hace que una página sea editable: explica el host de edición, la ubicación del cursor y cómo el navegador posee el comportamiento de edición.
contenteditable="true" convierte un elemento en un host de edición. El navegador gestiona el movimiento, la selección, la inserción y la eliminación del cursor dentro de él, con un árbol DOM debajo. La superficie de edición de ToolAcre utiliza esta función del navegador y expone tanto el modo visual como el modo fuente; el contenido permanece en la página en lugar de enviarse a un servidor de texto enriquecido. Un evento de pegado recibe atención especial porque el HTML pegado puede incluir elementos y atributos que no deben ingresar a un documento confiable sin marcar.
Cada pulsación de tecla es una mutación DOM: describe el crecimiento de los nodos de texto, los elementos que se ajustan y dividen y por qué el árbol cambia incluso cuando el texto parece no haber cambiado.
Escribir crea o amplía nodos de texto; presionar Enter puede dividir un bloque; Poner en negrita una selección envuelve un rango. No se garantiza que el DOM preciso después de dos clics coincida con la cadena <strong> imaginada por un desarrollador: los navegadores eligen diferentes elementos y anidamientos. ToolAcre actualmente usa document.execCommand para formatear. Esa API está en desuso, pero aquí no existe un reemplazo directo implementado de manera uniforme para cada operación de edición, por lo que el editor trata su salida como una entrada que no es confiable para ser normalizada en lugar de como un marcado canónico.
De DOM en vivo a cadena HTML: explica la serialización del árbol editado en un marcado que puede copiar
Para copiar HTML, el editor lee el HTML interno de la superficie de edición y pasa la cadena resultante a través de una lista de elementos/atributos permitidos. Etiquetas como b están normalizadas a semántica fuerte; Los enlaces permitidos se verifican para detectar esquemas de URL aceptables, mientras que se eliminan los controladores de eventos y los atributos no relacionados. El modo fuente también pasa su texto a través del mismo filtro antes de volver a colocarlo en la superficie visual. Esta es una ruta de limpieza específica del editor, no un desinfectante HTML del lado del servidor de propósito general para contenido hostil de usuarios arbitrarios.
Ejemplo resuelto: una nota de dos párrafos con una frase en negrita: sigue el DOM al escribir, seleccionar y poner en negrita, luego muestra el marcado resultante
Escriba dos párrafos: “Actualización del proyecto” y “Borrador listo”, luego seleccione “Borrador” en el segundo y presione Negrita. Un navegador puede insertar <b>Draft</b> en el DOM en vivo. Cambiar al modo fuente lo pasa a través del desinfectante de ToolAcre, que puede emitir <strong>Draft</strong> dentro de su párrafo después de la normalización. Pruebe con una carga útil <img onerror="..."> pegada en un documento desechable: la lista de permitidos de salida no incluye imágenes ni atributos de controlador de eventos. El ejemplo ilustra por qué se inspecciona el marcado resultante en lugar de asumir que un clic tiene una representación HTML universal.
Por qué las mismas acciones dan un marcado diferente en diferentes navegadores: cubre el comportamiento de edición específico del navegador y por qué los editores normalizan su salida.
Los distintos navegadores implementan de forma diferente los comandos de edición, los saltos de línea y los límites de selección. Incluso los párrafos visibles idénticos se pueden serializar con diferentes tramos anidados o elementos de bloque. El paso de normalización reduce algunas diferencias pero no convierte a una superficie WYSIWYG en un serializador garantizado por estándares. ToolAcre muestra la fuente junto con el resultado visual, para que pueda corregir el anidamiento extraño. Su vista previa se ejecuta en un iframe con un atributo de zona de pruebas que no permite la ejecución del script, lo que limita el impacto de que un fragmento inseguro llegue a esa vista previa.
Lo que esto no cubre: la edición colaborativa, las pilas de deshacer y los marcos de trabajo completos del editor están fuera del alcance.
Esta página no promete edición colaborativa, un historial completo de deshacer, un cliente de correo electrónico pulido o un marco de edición completo. Contenteditable no puede por sí solo decidir qué marcado acepta un CMS de terceros, y una lista de permitidos basada en cadenas no sustituye a un analizador HTML5 del lado del servidor donde los usuarios que no son de confianza pueden enviar contenido. La vista previa en el espacio aislado es una defensa independiente del resultado de limpieza; tampoco hace que JavaScript arbitrario o URL hostiles sean seguros en todos los destinos.
Conclusión: el editor es un DOM que puede ver: resume el mecanismo y cómo el editor HTML WYSIWYG de ToolAcre expone el marcado que produce su formato, sin salir del navegador.
El editor es un DOM que puedes ver e inspeccionar. El editor HTML WYSIWYG de ToolAcre le brinda una forma directa de comparar una acción de formato visual con el HTML filtrado que produce, localmente en su navegador. Escriba y ponga en negrita una nota desechable, cambie al modo fuente y conserve solo los elementos que su destino realmente admita.