CKEditor crecimiento automático cuestión plugin de barra de desplazamiento vertical parpadeante

Question

Estoy teniendo un problema con el plugin CKEditor crecimiento automático:

Al pulsar retorno (después de auto-crecimiento más allá de la altura min), los batidos de contenido de texto (salta una línea hacia arriba y hacia abajo), y una barra de desplazamiento vertical se enciende y apaga intermitentemente. El crecimiento automático funciona, pero la experiencia del usuario es desigual.

Puedo ocultar la barra de desplazamiento vertical especificando desplazamiento = "no" y desbordamiento = "oculto", pero el contenido del texto todavía se sacude.

estoy desactivando el desplazamiento en ckeditor.js:

<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameBorder="0" title="'+E+'"'+' src="'+W+'"'+' tabIndex="'+(b.webkit?-1:C.tabIndex)+'"'+' allowTransparency="true"'+'></iframe> 

CKEditor código de inicialización:

 CKEDITOR.replace('Description', 
     { 
      sharedSpaces: 
      { 
       top: 'topSpace', 
       bottom: 'bottomSpace' 

      }, 
      extraPlugins: 'autogrow,tableresize', 
      removePlugins: 'maximize,resize,elementspath', 
      skin: 'kama', 
      toolbar: [['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'], ['TextColor', 'BGColor'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['NumberedList', 'BulletedList'], ['Outdent', 'Indent'], 
      '/', ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], ['PasteText', 'PasteFromWord'],['Cut','Copy','Paste'], ['Undo', 'Redo'], ['Find', 'Replace'], ['SpellChecker']], 
      toolbarCanCollapse: false, 
      pasteFromWordRemoveFontStyles: false, 
      enterMode: CKEDITOR.ENTER_BR, 
      shiftEnterMode: CKEDITOR.ENTER_P, 
      autoGrow_minHeight: 300 

     }) 

¿Hay alguna manera de evitar los saltos de contenido de texto/desplazamiento al pulsar la tecla ENTER (después de auto crecer más allá de la altura mínima)?

Answer 1

AFAIK la única manera de resolver este problema es modificar el código de CKEDitor. (Sugeriría manejar el evento 'clave de entrada' como sucede y no en tiempo de espera como lo hacen).

Answer 2

He estado probando una solución hoy y creo que tengo una solución de trabajo para todos los principales navegadores. Además, también hice una solución para el problema de tamaño de la barra de desplazamiento horizontal (la barra de desplazamiento horizontal no aumenta el tamaño del editor). Sin embargo, eso terminó siendo un poco complicado (por simplicidad, la altura de la barra de desplazamiento está codificada en 17 píxeles), así que le proporcionaré ambas versiones, con y sin la corrección de barra de desplazamiento horizontal.

Sé que la forma correcta sería crear un parche y sugerir que se implemente en la próxima versión de CKEditor, pero eso lleva un tiempo, mientras tanto, esto es lo que puede hacer. Puede descargar el archivo comprimido plugin.js modificado desde el enlace de abajo y colocarlo en su CKEditor en ruta /plugins/autogrow/plugin.js

• Sin horizontal solución barra de desplazamiento: http://www.filedropper.com/plugin_3
• Con arreglo barra de desplazamiento horizontal: http://www.filedropper.com/plugin_1

¿Qué ha cambiado?

Explicaré estas modificaciones a través de archivos descomprimidos (_source folder) que son legibles, mientras que los archivos comprimidos son bastante difíciles de leer y comprender.

Hice pequeñas modificaciones al marcador temporal de crecimiento automático que se usa para calcular la nueva altura del editor. Aquí está la nueva versión del código de marcador en _source (sin comprimir) de crecimiento automático/plugin.js línea 19.

var marker = CKEDITOR.dom.element.createFromHtml('<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:0px;font-size:0;display:block;">&nbsp;</span>', doc); 

Así se cambia la altura de 1 píxel a cero píxeles, un espacio de no separación se imprime siempre en el interior del elemento marcador y el tamaño de la fuente está forzado a cero. Después de estas modificaciones, esto realmente solucionó el problema, en lugar de eliminar el marcador de DOM inmediatamente, lo cambié para eliminarlo con un tiempo de espera de 1 milisegundo (línea 24 en el archivo plugin.js sin comprimir).

setTimeout(function() { 
    marker.remove(); 
},1); 

solución barra de desplazamiento horizontal

Esto es algo de brillo. Acabo de agregar una comprobación de si el editor scrollWidth es más grande que clientWidth y, en caso afirmativo, agregue 17 píxeles a las variables newHeight y currentHeight antes de comprobar los nuevos valores mínimos y máximos permitidos.

// TODO: calculate horizontal scrollbar height instead of using static 17 pixels 
if (scrollable.$.scrollWidth > scrollable.$.clientWidth) { 
    newHeight += 17; 
    currentHeight += 17; 
} 

newHeight = Math.max(newHeight, min); 
newHeight = Math.min(newHeight, max); 

En lugar de utilizar 17 píxeles valor codificado, el método de lo expuesto en el How can I get the browser's scrollbar sizes? (o algo similar) podría utilizarse para calcular el tamaño de la barra de desplazamiento para hacer esta corrección más adecuada.

Answer 3

1. contents.css complemento:

   body {overflow: hidden;/Ocultar Autogrow parpadeo /}

   (Necesidad de borrar la memoria caché para probar)

2. plugin.js (resizeEditor) ajusta "espacio adicional especificado por el usuario" = 20:

newHeight + = 20; // Fix Autogrow parpadea //(editor.config.autoGrow_bottomSpace || 0);

1. plugin.js (resizeEditor) reemplazan:

si ($ desplazable scrollHeight> scrollable.clientHeight ...

Con:..

//Fix Autogrow flicker: 
    //contents.css change (test: clear css cache): body {overflow:hidden; /*Hide Autogrow flicker*/} 
    var editorBody = $(editor.editable().$); 
    if (newHeight >= max) 
     editorBody.css('overflow-y', 'visible'); 
    else 
     editorBody.css('overflow-y', 'hidden');