Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

iframe being rendered strangely in the canvas view

Abierto
#37 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Reproduce el comportamiento del iframe en la demo oficial usando un bloque de código personalizado y, después, compare la vista del canvas con el modal de View code y editor.getHtml(). Rastree dónde el canvas reemplaza el iframe por un div y mueve sus atributos; se considera terminado cuando el canvas conserva el diseño del iframe y sigue siendo coherente con la salida del modelo.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Hello,

The issue described below can be reproduced on the official demo at https://grapesjs.com/demo.html

When I try to add an iframe in a custom code block, the view tends to replace the iframe by a div, which breaks the layout of the iframe. However, the model seems to have the correct iframe since it is shown correctly in the view code modal, or by using editor.getHtml().

For example, if I add this iframe which is an embed YouTube video:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?si=m6l8dvLYog_PS9a4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

This is what the canvas view will use, parts of the iframe attributes are now on a parent div:

<div data-gjs-highlightable="true" id="i73h" data-gjs-type="custom-code" draggable="true">
  <div id="i5xd" data-gjs-type="video" draggable="true" allowfullscreen="" width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?si=m6l8dvLYog_PS9a4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" class="gjs-hovered">
    <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?" frameborder="0" allowfullscreen="true" class="gjs-no-pointer" style="height: 100%; width: 100%;"></iframe>
  </div>
</div>
Lenguaje dominante
TypeScript
Estrellas
81
Forks
47
Sin PR fusionados en 30 d

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de GrapesJS/components-custom-code

Todos los issues de GrapesJS/components-custom-code

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.