Herramientas de desarrollo · Editor HTML WYSIWYG
Enter vs Shift+Enter: cómo los editores eligen entre <p>, <div> y <br>
· Cómo funciona
html contento edición de texto
Explica el modelo de párrafo detrás de los editores de navegador: por qué Enter puede crear un <p> o un <div>, por qué Shift+Enter inserta <br> y cómo eso decide el espaciado.
Por qué el espaciado es incorrecto en el CMS pero está bien en el editor: se abre con el clásico problema de doble espacio o sin espacio
El espaciado que parece cómodo en el editor puede cambiar cuando el fragmento ingresa a un CMS porque los bloques reciben márgenes de la hoja de estilo de destino. Dos párrafos y dos líneas separadas por br son estructuralmente diferentes incluso si una vista previa les da una distancia vertical similar.
ToolAcre expone esa diferencia en la fuente. No incluye márgenes copiados ni estilos en línea, por lo que el espaciado entre párrafos proviene del contenedor de vista previa o del CSS de destino posterior. Los escritores deben elegir la estructura por significado y verificar los elementos serializados en lugar de agregar pulsaciones de teclas en blanco hasta que una vista temporal se vea bien.
Bloque versus saltos en línea: explica que <p> y <div> son bloques con sus propios márgenes, mientras que <br> es un salto de línea dentro de un bloque.
El párrafo y el div son contenedores de bloques; br es un elemento de salto de línea vacío dentro de otro flujo. Este editor permite py br pero no div. Un div pegado se desenvuelve, conservando sus palabras y sus descendientes permitidos, mientras se descarta el envoltorio. El br desinfectado se emite como `<br />`.
Una dirección postal puede ser un párrafo con saltos de línea deliberados porque sus líneas forman una unidad. Dos pensamientos independientes se representan mejor en dos párrafos. El destino puede diseñar los márgenes p de manera consistente, mientras que los elementos br repetidos utilizados como espaciadores verticales codifican la apariencia directamente en el contenido.
Lo que Enter hace aquí depende del navegador y no está configurado por ToolAcre
ToolAcre no establece un comando separador de párrafo predeterminado ni intercepta Enter. El navegador satisfecho maneja la clave y el oyente de entrada actualiza la salida después. Las limitaciones del repositorio advierten que el comportamiento del motor difiere, por lo que afirmar que Enter siempre crea p, siempre crea div o sigue una regla específica de la versión sería una guía de compatibilidad inventada.
El paso de desinfección luego limita cualquier serialización que llegue. Un div creado por el navegador no puede sobrevivir como div, aunque su texto puede permanecer. Esto puede hacer que la fuente final vuelva a diferir del árbol intermedio vivo. Por lo tanto, el modo fuente es el lugar para establecer elementos p explícitos cuando el significado estable del párrafo importa.
Se pueden escribir pausas suaves en el código fuente, pero no se implementa ningún contrato Shift+Enter
La barra de herramientas no tiene un botón de “descanso suave” y el código no registra Shift+Enter. Un navegador puede implementar ese gesto, pero este artículo no promete su resultado. El modo fuente puede conservar un br permitido, lo que proporciona una forma determinista de expresar una pausa dentro de un párrafo después de inspeccionar el resultado visual.
El comportamiento del teclado también depende del estado de selección y edición que el módulo no prueba. Utilice el navegador exacto involucrado en su trabajo, luego lea la fuente. Si el gesto produce un bloque no deseado, reescribe el fragmento explícitamente en lugar de confiar en una descripción de acceso directo copiada de otro marco de edición.
Ejemplo resuelto: crear una dirección y una nota, luego inspeccionar en lugar de predecir
Para una dirección, use el modo fuente para hacer una p con br entre el destinatario, la calle y la localidad. Para una nota breve, haz dos elementos p. Regrese al modo visual, donde la fuente se desinfecta antes de la inserción, y compare la vista previa sin asumir que sus márgenes coinciden con el sitio web final.
Luego copie HTML e inspeccione el fragmento por separado de Descargar HTML. El resultado copiado contiene marcas corporales desinfectadas; la descarga contiene un documento completo con la vista previa CSS de ToolAcre. Esta distinción puede explicar por qué abrir el archivo descargado parece más completo que pegar el fragmento copiado en un sistema con diferentes estilos.
Los párrafos vacíos y los espacios sin separación se conservan solo cuando lo admite la reescritura.
Un párrafo vacío permitido puede permanecer porque se acepta p y ninguna regla elimina bloques vacíos. Una entidad conocida de espacio sin interrupción puede convertirse en su carácter decodificado y luego escaparse de acuerdo con la implementación de la entidad local; el código no proporciona una regla de limpieza dirigida específicamente a los párrafos espaciadores.
Por lo tanto, "Desinfectar ahora" no es un limpiador de diseño. Elimina marcas y atributos no admitidos, equilibra etiquetas y formatea la fuente, pero puede conservar el vacío estructuralmente permitido. Elimine deliberadamente los artefactos de espaciado en el modo fuente o visual y deje que el CSS de destino proporcione márgenes normales en lugar de acumular bloques en blanco.
Lo que esto no cubre: reglas de colapso de márgenes CSS o configuración del marco del editor
Este artículo no cubre el colapso de márgenes, la configuración del separador de marco, las matrices de teclado navegador por navegador ni las peculiaridades del espaciado del correo electrónico. Tampoco afirma que la vista previa reproduzca un CMS. El sandbox ligero utiliza su propia fuente de cuerpo, altura de línea, relleno y comportamiento de ruptura.
Tampoco trata la salida filtrada como una publicación universalmente segura. Un envío malicioso necesita una desinfección del lado del servidor adecuada al destino, incluso si una vista previa local desechable permanece inerte. La semántica de los párrafos, el comportamiento de edición del navegador y la política de seguridad son tres preocupaciones distintas que no deben agruparse en una sola prueba de "parece correcto".
Conclusión: elija la ruptura que coincida con el significado: resume el modelo y cómo el editor HTML WYSIWYG de ToolAcre le permite verificar qué elemento produce cada clave
Elija la pausa que coincida con el contenido, pero verifique en lugar de predecir la pulsación de tecla. ToolAcre brinda acceso directo al código fuente, acepta p y br, desenvuelve div y muestra una representación en espacio aislado. Esos hechos respaldan un flujo de trabajo repetible sin inventar una promesa sobre Enter o Shift+Enter.
Cree una pequeña dirección y nota, cambie de modo dos veces y asegúrese de que la estructura prevista sobreviva a la desinfección. Si un destino presenta lagunas sorprendentes, inspeccione su CSS en lugar de insertar más HTML vacío. El significado estable viaja mejor que el espaciado ajustado a una vista previa aislada.