CKEditor aumento automatico problema plugin di barra di scorrimento verticale tremolante

Question

Sto avendo un problema con il plugin CKEditor aumento automatico:

Premendo ritorno (dopo l'auto-coltivazione oltre l'altezza min), le scosse di contenuti di testo (salta su una linea e indietro) e una barra di scorrimento verticale lampeggia e si spegne. L'autogrow funziona, ma l'esperienza utente è a scatti.

Posso nascondere la barra di scorrimento verticale specificando scrolling = "no" e overflow = "hidden", ma il contenuto del testo scuote ancora.

sto disattivando lo scorrimento in 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 codice di inizializzazione:

 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 

     }) 

Esiste un modo per evitare il salto di contenuto text/spostamento premendo il tasto Invio (dopo aver fatto crescere automaticamente l'altezza minima)?

Answer 1

AFAIK l'unico modo per risolvere questo problema è modificare il codice di CKEDitor. (suggerirei di gestire l'evento 'entry key' come succede e non in timeout come fanno).

Answer 2

Ho testato una soluzione oggi e penso di avere una soluzione funzionante per tutti i principali browser. Inoltre, ho anche apportato una correzione per il problema di ridimensionamento della barra di scorrimento orizzontale (la barra di scorrimento orizzontale non aumenta le dimensioni dell'editor). Questo ha finito per essere un po 'un kludge però (per semplicità l'altezza della scrollbar è di 17 pixel hardcoded) quindi ti fornirò entrambe le versioni, con e senza la correzione della barra di scorrimento orizzontale.

So che il modo corretto sarebbe quello di creare una patch e suggerire che sia implementata nella prossima versione di CKEditor, ma ci vuole un po 'di tempo così intanto ecco cosa si può fare. È possibile scaricare il file compresso plugin.js modificato dal link qui sotto e inserirlo nel CKEditor nel percorso /plugins/autogrow/plugin.js

• Senza orizzontale correzione barra di scorrimento: http://www.filedropper.com/plugin_3
• Con correzione barra di scorrimento orizzontale: http://www.filedropper.com/plugin_1

Quindi cosa è stato cambiato?

Spiegherò queste modifiche tramite file non compressi (cartella _source) che sono leggibili mentre i file compressi sono piuttosto difficili da leggere e comprendere.

Ho apportato piccole modifiche al marcatore temporaneo autogrow che viene utilizzato per calcolare la nuova altezza dell'editor. Ecco la nuova versione di codice marcatore a sorgente_ (non compresso) di aumento/plugin.js linea 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); 

Così altezza passa da 1 pixel a zero pixel, uno spazio unificatore viene sempre stampato all'interno dell'elemento marcatore e la dimensione del font è forzata a zero. Dopo queste modifiche questo problema ha effettivamente risolto il problema - invece di rimuovere immediatamente il marker da DOM l'ho modificato per essere rimosso tramite un timeout di 1 millisecondo (riga 24 nel file plugin.js non compresso).

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

barra di scorrimento orizzontale correzione

Questo è po 'di noioso. Ho appena aggiunto un controllo se l'editor scrollWidth è più grande di clientWidth e in tal caso aggiungere 17 pixel alle variabili newHeight e currentHeight prima di controllare i valori minimi e massimi consentiti di NewHeight.

// 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); 

Invece di utilizzare 17 pixel valore hardcoded, metodo descibed in How can I get the browser's scrollbar sizes? (o qualcosa di simile) potrebbero essere utilizzati per calcolare la dimensione barra di scorrimento per rendere questa correzione più appropriata.

Answer 3

1. contents.css aggiuntivo:

   body {overflow: hidden;/Hide Autogrow sfarfallio /}

   (necessità di cancellare la cache di testare)

2. plugin.js (resizeEditor) Impostare "spazio aggiuntivo specificata dall'utente" = 20:

newheight + = 20; // Correggi lo sfarfallio di Autogrow //(editor.config.autoGrow_bottomSpace || 0);

1. plugin.js (resizeEditor) Sostituire:

if ($ scorrevole 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');