Redactor: No se puede desplazar después de ver la fuente HTML

Creado en 24 ene. 2019  ·  17Comentarios  ·  Fuente: craftcms/redactor

97

Ya reportado pero cerrado por inactividad.

Tengo exactamente el mismo problema aquí, pero la barra de desplazamiento no desaparece, simplemente no funciona.
Cambiar el tamaño de la ventana hace que funcione hasta que me desplace nuevamente.

No hay error dentro de la consola del navegador.

Mismos pasos para reproducir:

  1. Habilite el complemento de fuente html ( _button?_ ) para el campo redactor
  2. Pegue suficiente texto para que aparezca la barra de desplazamiento
  3. Mostrar la fuente html del texto pegado
  4. Desplácese hacia abajo
  5. Después de desplazarse hacia abajo, la barra de desplazamiento desaparece (_ no para mí _). El usuario no puede volver a desplazarse hacia arriba; al intentarlo, las páginas "saltan" un poco hacia arriba y luego vuelven a la posición anterior. Todos los botones de redacción desaparecen.

Lo único aquí es que tengo un formato personalizado agregado a mi configuración de redactor, pero después de algunas pruebas, no hay diferencia.

Artesanía CMS 3.1.3
Redactor 2.3.0

Comentario más útil

@angrybrad

https://streamable.com/f6we5

(La espera antes de intentar hacer clic en la barra de desplazamiento soy yo tratando de desplazarme con el mouse)

Todos 17 comentarios

Todavía no puedo reproducir esto, pero acabo de lanzar la versión 2.3.2 que incluye una versión más nueva de Redactor. Esto probablemente esté arreglado ahora, pero avísame si no lo está.

¡Acabo de actualizar a la última versión y el error sigue aquí!

Aparentemente está arreglado en Firefox, pero aún está aquí en Chrome 72.

Estoy en un sistema Windows 10.

¿Puede reproducir este error en https://imperavi.com/redactor/ ?

Tengo el mismo problema al usar Windows 10 en la última versión de Chrome. La última versión de craft y la última versión del complemento. Si cambio a la vista de código, aparece el html, pero cuando lo desplazo, mueve inmediatamente la barra de desplazamiento hacia abajo y solo muestra un cuadro negro en blanco y la barra de desplazamiento se congela. Me di cuenta en la página de imperavi anterior si agrego la misma cantidad de texto y cambio de vista, la vista de código tiene una gran cantidad de espacio negro debajo del código, es decir, el editor ha mantenido la misma altura que el modo de texto. Me pregunto si esto puede ser parte del problema. Actualmente es imposible usar el modo de código.

También noté que solo ocurre cuando se cambia de una vista de texto largo a la vista de código. Si tiene un campo de redactor vacío y cambia a la vista de código y pega el código, la barra de desplazamiento funciona bien dentro del campo.

@lettie16 ¿puede reproducir este error en https://imperavi.com/redactor/ ?

¿Puede reproducir este error en https://imperavi.com/redactor/ ?

Hola Andris,

No, no puedo replicarlo en este sitio. Pero no creo que esto sea una comparación similar, creo que tiene algo que ver con la forma en que interactúa con el campo craft cms. como mencioné anteriormente, si tiene un campo limpio y vacío, pegar en la vista de código funciona bien, pero la barra de desplazamiento está dentro de la edición como este editor.

Si pega una gran cantidad de texto en la vista de texto y luego cambia a la vista de código, se produce el problema y la barra de desplazamiento aparece fuera del editor, es decir, desplaza todo el panel de campo, no solo el editor, excepto que no lo hace porque se congela.

Creo que tal vez tenga algo que ver con la forma en que el código vuelve a calcular la altura del editor después de cambiar de vista.

Tener dificultades para reproducir esto en Windows 10, Chrome 72 y la última versión de Craft 3 y Redactor. ¿Puede alguien grabar un video rápido del comportamiento en caso de que me esté perdiendo un paso en alguna parte?

@angrybrad

https://streamable.com/f6we5

(La espera antes de intentar hacer clic en la barra de desplazamiento soy yo tratando de desplazarme con el mouse)

@timoteh hrm... ¿tal vez tiene algo que ver con estar dentro de Matrix/Super Table? ¿Puede enviar su archivo composer.json y un volcado de base de datos a [email protected] y hacer referencia a este problema y señalarnos la entrada/campo en el video que usó?

Intenté usarlo fuera de Matrix/Super Table y el resultado es el mismo.

@angrybrad , listo!

@timoteh Inicialmente pude reproducir esto después de un tiempo, pero volviendo a eso ya no puedo. ¿Puedes asegurarte de tener la versión más reciente de Chrome/Reactor y Craft y ver si sigue siendo un problema para ti?

@angrybrad
Acabo de probar en Chrome, sigue igual.

Google Chrome
Versión 73.0.3683.103 (compilación oficial) (64 bits)
Artesanía CMS 3.1.23
Redactor 2.3.2

@timoteh , ¿quizás tenga algo que ver con el tamaño de pantalla/resolución? ¿Estás corriendo con el navegador maximizado ya qué resolución?

@angrybrad Sí, maximizado, pero incluso cuando trato de jugar con el tamaño de la pantalla, siempre obtengo el mismo resultado. ¡He intentado reproducirlo en múltiples configuraciones de Craft 3 y siempre puedo!

Mis compañeros de trabajo en iOS ya no pueden reproducirlo, así que aquí está mi configuración:
image

Además, ¿qué hay de ti @lettie16 ?

También veo este problema en Win10 + Chrome 74.0.3729.131 + Craft 3.1.25 + Redactor 2.3.3.2

Noté en las herramientas de desarrollo que algo en el javascript parece estar atrapado en un bucle infinito, ya que comienza a configurar este div para "mostrar: ninguno" una y otra vez:

<div class="redactor-styles redactor-in redactor-in-0" dir="ltr" aria-labelledby="redactor-voice-0" role="presentation" contenteditable="true" domtargetshow="" style="display: none;">

Algunas notas más:

  • Parece que el javascript está obligando al elemento desplazable a desplazarse hasta el final.
  • Se detiene si hago clic en una pestaña de diseño de campo diferente (es decir, ocultando el campo redactor).
  • Con una publicación más larga, parece que no se activa inmediatamente al desplazarse; tengo que desplazarme hacia abajo una cierta cantidad antes de que se active el error.

Encontré una solución CSS para esto evitando que el div contenteditable que contiene el contenido WYSIWYG se establezca en display: none cuando el div de origen está visible, lo que a su vez parece evitar que Redactor entre en un bucle infinito . Agregue este CSS a su CP:

.redactor-source-view [contenteditable="true"] {
    display: block !important;
    height:0 !important;
    width:0 !important;
    padding:0 !important;
    overflow: hidden !important;
}

Pruebas en los últimos Chrome y Firefox en Mac y Chrome en PC.

Puede probar con este útil complemento para agregar CSS al panel de control: https://github.com/doublesecretagency/craft-cpcss

@croxton gracias por la solución! Como todavía no puedo reproducirme, solo voy a confiar en eso :)

¿Fue útil esta página
0 / 5 - 0 calificaciones