Herramientas de desarrollo · Editor HTML WYSIWYG
Por qué execCommand está obsoleto y qué utilizan los editores del navegador en su lugar
· Cómo funciona
html contento flujo de trabajo del desarrollador
Cubre el ascenso y la caída de document.execCommand, por qué su resultado fue inconsistente y cómo los editores modernos se basan en Selección, Rango y antes de la entrada.
El botón de una línea en negrita que dejó de ser seguro: se abre con execCommand('bold') y la advertencia de obsolescencia
Un botón en negrita puede ser una llamada: enfoque la superficie de edición, luego solicite a `document.execCommand` que aplique `bold` a la selección actual. ToolAcre todavía usa esa ruta porque el navegador posee el cursor y el rango seleccionado dentro de su elemento contenteditable. La llamada compacta es conveniente, pero la conveniencia no hace que el árbol resultante sea predecible.
El código trata el rechazo como una posibilidad ordinaria. Su contenedor de comandos detecta una excepción, anuncia que el navegador rechazó la acción y dirige al escritor al modo fuente. Esa alternativa es más honesta que prometer que un clic en la barra de herramientas siempre produce un elemento en particular o funciona de manera idéntica en todos los motores.
Qué hizo execCommand y de dónde vino: explica su origen en las primeras etapas de Internet Explorer y su adopción por todos los navegadores.
El mismo contenedor maneja listas en negrita, cursiva, desordenadas y ordenadas, eliminación de formato, deshacer, rehacer, bloquear formato, enlaces y desvinculación. Esos son los comandos realmente presentes en la barra de herramientas; este artículo no amplía la lista con alineación, colores, fuentes, tablas, imágenes u otras características familiares de texto enriquecido que la implementación nunca expone.
Cada comando se ejecuta en el DOM editable en vivo. Luego, el panel actualiza su fuente, vista previa, recuento de palabras y informe de eliminación del HTML interno actual. Por lo tanto, el resultado guardado no es un registro de comandos. Es una serialización filtrada de cualquier estructura que el navegador dejó después de realizar o rechazar la operación solicitada.
Por qué la API de comandos está en desuso: los navegadores pueden producir diferentes formas de DOM
La obsolescencia es importante porque la API no le brinda al autor del editor un contrato estructural preciso para cada mutación. Las limitaciones de ToolAcre advierten explícitamente que el comportamiento difiere entre motores, particularmente en torno a listas anidadas. Una lista visible puede ser aceptable aunque sus opciones de anidamiento o contenedor difieran del marcado producido por otro navegador.
Ninguna fuente de repositorio admite la afirmación de que cada navegador, versión o comando tenga un resultado de compatibilidad particular. La afirmación segura es más limitada: esta implementación llama a la API obsoleta, detecta rechazos y ofrece edición directa del código fuente como vía de escape. Pruebe el navegador y la operación que desea utilizar en lugar de extrapolar una matriz.
Selección y Rango son alternativas relevantes, pero esta herramienta no las implementa
La selección y el rango pueden describir los límites DOM seleccionados y admitir la manipulación explícita del árbol, pero ToolAcre no implementa un motor de formato de reemplazo con ellos. Nombrar esas API como si fueran la ruta del código actual describiría erróneamente el producto. Aquí, el comando del navegador sigue siendo el mutador y el desinfectante sigue siendo el límite de salida.
Un modelo personalizado podría poseer marcas, bloques, transacciones y mapeo de selección, pero esa es una arquitectura de producto diferente con diferentes pruebas. Este editor liviano evita deliberadamente reclamar dicha maquinaria. Su contrato revisable es que las acciones visuales pueden crear DOM dependiente del navegador, mientras que el modo fuente revela el marcado filtrado que realmente se copiará o descargará.
beforeinput no forma parte de la ruta de formato de este editor
La implementación tampoco intercepta `beforeinput` para traducir intenciones de edición en transacciones personalizadas. Los eventos de entrada simplemente activan una actualización después de que el navegador haya cambiado la superficie. Pegar y soltar son excepciones: esos eventos se evitan, se filtra su portapapeles o la carga útil de transferencia y solo se inserta el HTML o el texto sin formato resultante.
Esa distinción impide un reclamo arquitectónico amplio. ToolAcre posee la puerta de pegado, pero no todas las mutaciones de pulsación de tecla. Los comandos habituales de escritura, eliminación, entrada y barra de herramientas siguen siendo operaciones de edición del navegador. El desinfectante revisa su salida serializada; no convierte el editor en un marco impulsado por la entrada anterior ni normaliza cada mutación DOM intermedia.
Ejemplo resuelto: inspeccionar la salida del comando heredado que este editor realmente produce
Para una verificación concreta, escriba dos oraciones cortas, seleccione una frase y presione Negrita. Cambie a la fuente HTML e inspeccione el elemento alrededor de esa frase. ToolAcre asigna el `b` heredado a `strong` durante la desinfección, por lo que el resultado filtrado puede ser semántico incluso cuando el comando de edición en vivo eligió inicialmente una etiqueta heredada.
Repetir con una lista y luego deshacer. La barra de herramientas envía `insertUnorderedList` y `undo`; no mantiene un historial de aplicaciones separado. Si el navegador se niega, la región de estado lo indica. Si el anidamiento parece extraño, el modo de origen es la ruta de corrección admitida. La evidencia es el resultado observado, no la etiqueta del botón.
Lo que esto no cubre: aquí no se implementa ninguna arquitectura de editor de reemplazo
Este artículo no pretende ser compatible con un sistema de comando de reemplazo moderno, transacciones colaborativas, árboles deterministas entre navegadores o una pila de deshacer personalizada. Tampoco infiere el comportamiento de los atajos de teclado porque la fuente define las acciones de la barra de herramientas, no un registro de atajos. Las funciones no admitidas siguen siendo omisiones más que capacidades implícitas.
La seguridad es independiente de la elección del comando. Los filtros de la lista de permitidos emitieron marcas y la vista previa está protegida sin secuencias de comandos, pero el desinfectante rechaza explícitamente su uso como filtro XSS de entrada hostil general. Un servidor que acepta contenido de publicación que no es de confianza aún necesita un desinfectante de analizador HTML5 del lado del servidor adecuado y una política específica de destino.
Conclusión: sea dueño del DOM, no del comando: resume la ruta de migración y cómo el marcado resultante es lo que se inspecciona en una herramienta WYSIWYG a HTML
Posee el resultado que puedes inspeccionar. En este editor, un comando le pide al navegador que mute un árbol contentable y luego la lista de permitidos reescribe la serialización de ese árbol en el subconjunto admitido. El modo fuente expone la transferencia y proporciona una superficie de reparación práctica cuando el comportamiento de edición del navegador es inconveniente o inconsistente.
Utilice una muestra desechable en el mismo navegador que su trabajo real. Ejecute solo los comandos enviados, inspeccione los enlaces y el anidamiento, pruebe deshacer antes de confiar en él y copie el HTML filtrado solo después de leerlo. Ese flujo de trabajo respeta la obsolescencia sin pretender que ToolAcre ya haya reemplazado la API de edición subyacente.