8

CKEditorautogrowプラグインに問題があります。

Returnキーを押すと（最小の高さを超えて自動成長した後）、テキストコンテンツが揺れ（1行上にジャンプして下に戻ります）、垂直スクロールバーが点滅します。自動成長は機能しますが、ユーザーエクスペリエンスはぎくしゃくしています。

scrolling="no"とoverflow="hidden"を指定すると、垂直スクロールバーを非表示にできますが、テキストの内容が揺れます。

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初期化コード：

       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

        })

エンターキーを押したときにテキストコンテンツがジャンプ/シフトするのを回避する方法はありますか（最小の高さを超えて自動成長した後）？

4

3 に答える 3

2

私は今日、修正をテストしており、すべての主要なブラウザーで機能するソリューションがあると思います。さらに、水平スクロールバーのサイズの問題も修正しました (水平スクロールバーはエディターのサイズを大きくしません)。ただし、これは少し面倒なことになりました (簡単にするために、スクロールバーの高さは 17 ピクセルにハードコーディングされています)。そのため、水平スクロールバーの修正ありとなしの両方のバージョンを提供します。

パッチを作成し、CKEditor の次のリリースで実装することを提案するのが適切な方法であることはわかっていますが、それには時間がかかるため、その間にできることを次に示します。以下のリンクから修正済みの圧縮された plugin.js ファイルをダウンロードし、CKEditor のパス /plugins/autogrow/plugin.js に配置できます。

それで、何が変わったのですか？

これらの変更については、非圧縮 (_source フォルダー) ファイルを使用して説明します。これらのファイルは読み取り可能ですが、圧縮ファイルは読み取りと理解が非常に困難です。

エディターの新しい高さを計算するために使用される autogrow 一時マーカーに小さな変更を加えました。_source (非圧縮) autogrow/plugin.js 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 );

したがって、高さは 1 ピクセルから 0 ピクセルに変更され、改行しないスペースが常にマーカー要素内に出力され、フォント サイズは強制的に 0 になります。これらの変更の後、実際に問題が修正されました。代わりに、マーカーを DOM からすぐに削除する代わりに、1 ミリ秒のタイムアウト (非圧縮の plugin.js ファイルの 24 行目) で削除されるように変更しました。

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

水平スクロールバーの修正

これは少し退屈です。エディタの scrollWidth が clientWidth より大きいかどうかのチェックを追加しました。そうであれば、newHeight の最小値と最大値をチェックする前に、newHeight 変数と currentHeight 変数に 17 ピクセルを追加します。

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

17 ピクセルのハードコードされた値を使用する代わりに、ブラウザのスクロールバーのサイズを取得するにはどうすればよいですか?で説明されている方法を使用します。（または同様のもの）を使用してスクロールバーのサイズを計算し、この修正をより適切にすることができます。

于 2012-07-17T17:05:15.513 に答える
0

私の知る限り、この問題を解決する唯一の方法は、CKEDitor のコードを変更することです。（「エントリキー」イベントは、タイムアウトではなく、発生したときに処理することをお勧めします）。

于 2011-12-15T08:40:48.477 に答える