CKEditor autoogrow plugin vertikales scrollbar flackerndes Problem

8

Ich habe ein Problem mit dem CKEditor autoogrow-Plugin:

Beim Drücken von return (nach dem automatischen Wachstum über die Mindesthöhe hinaus) wird der Textinhalt geschüttelt (springt eine Zeile nach oben und zurück), und eine vertikale Bildlaufleiste flackert ein- und aus. Die automatische Vergrößerung funktioniert, aber die Benutzererfahrung ist ruckelnd.

Ich kann die vertikale Bildlaufleiste ausblenden, indem ich scrolling="no" und overflow="hidden" festlege, aber der Textinhalt wird immer noch erschüttert.

Ich deaktiviere Scrollen in ckeditor.js:

%Vor%

CKEditor-Initialisierungscode:

%Vor%

Gibt es eine Möglichkeit zu vermeiden, dass der Inhalt des Textinhaltes beim Drücken der Enter-Taste springt / verschoben wird (nach dem Autofahren über die Mindesthöhe hinaus)?

    
Jayaraj 13.12.2011, 04:32
quelle

3 Antworten

2

Ich habe heute ein Update getestet und ich denke, ich habe eine funktionierende Lösung für alle gängigen Browser. Darüber hinaus habe ich auch ein Problem mit der horizontalen Skalierung der Bildlaufleisten behoben (die horizontale Bildlaufleiste vergrößert die Größe des Editors nicht). Das Ergebnis war jedoch ein bisschen wie ein Kludi (der Einfachheit halber ist die Höhe der Bildlaufleiste fest mit 17 Pixeln angegeben). Daher stelle ich Ihnen beide Versionen zur Verfügung, mit und ohne die horizontale Bildlaufleiste.

Ich weiß, der richtige Weg wäre, einen Patch zu erstellen und vorzuschlagen, dass er in der nächsten Version von CKEditor implementiert wird, aber das dauert eine Weile, während Sie hier sind, was Sie tun können. Sie können die geänderte komprimierte Datei plugin.js über den folgenden Link herunterladen und in Ihren CKEditor im Pfad /plugins/autogrow/plugin.js

kopieren

Was wurde geändert?

Ich werde diese Änderungen über unkomprimierte (_source Ordner) Dateien erklären, die lesbar sind, während komprimierte Dateien ziemlich schwer zu lesen und zu verstehen sind.

Ich habe kleine Änderungen an der automatischen Markierung vorgenommen, mit der die neue Höhe des Editors berechnet wird. Hier ist die neue Version des Markierungscodes in _source (unkomprimiert) autogrow / plugin.js Zeile 19.

%Vor%

So wird die Höhe von 1 Pixel auf null Pixel geändert, ein nicht brechendes Leerzeichen wird immer innerhalb des Marker-Elements gedruckt, und die Schriftgröße wird auf Null gesetzt. Nach diesen Änderungen wurde das Problem behoben - anstatt den Marker sofort aus dem DOM zu entfernen, änderte ich ihn so, dass er über 1 Millisekunde Timeout entfernt wurde (Zeile 24 in der unkomprimierten plugin.js Datei).

%Vor%

Horizontale Bildlaufleistenkorrektur

Das ist ein bisschen langweilig. Ich habe gerade eine Überprüfung hinzugefügt, ob der Editor scrollWidth größer als clientWidth ist, und wenn ja, füge den newHeight- und currentHeight-Variablen 17 Pixel hinzu, bevor du die newheight minimal und maximal erlaubten Werte überprüfst.

%Vor%

Anstatt den hartcodierten Wert von 17 Pixeln zu verwenden, wird die Methode in Wie kann ich den Browser bekommen? scrollbar sizes? (oder etwas Ähnliches) könnte verwendet werden, um die Größe der Bildlaufleiste zu berechnen, um diese Korrektur zu verbessern.

    
Perttu 17.07.2012 17:05
quelle
1
  1. contents.css hinzufügen:

    body {Überlauf: versteckt; / Ausblenden von Autofokus-Flimmern /}

    (Cache zum Testen löschen)

  2. plugin.js (resizeEditor) Setzen Sie "Zusätzlichen Speicherplatz, der vom Benutzer angegeben wird" = 20:

newHeight + = 20; // Repariere automatisches Flimmern //(editor.config.autoGrow_bottomSpace || 0);

  1. plugin.js (resizeEditor) ersetzen:
  

if (scrollbar. $. scrollHeight & gt; scrollable.clientHeight ...

Mit:

%Vor%     
SirMoreno 17.12.2013 12:05
quelle
0

AFAIK Die einzige Möglichkeit, dieses Problem zu lösen, ist die Änderung des CKEDitor-Codes. (Ich würde vorschlagen, das Ereignis 'Eintrittsschlüssel' so zu behandeln, wie es geschieht und nicht wie bei der Zeitüberschreitung.)

    
Omeriko 15.12.2011 08:40
quelle