CKEditor的自動增長的插件垂直滾動閃爍問題

我在與CKEditor的自動增長的插件問題

（後自動增長過去最低高度），文本內容奶昔（跳起來一行，並後退），並且垂直滾動條閃爍開啓和關閉。 autogrow起作用，但用戶體驗不穩定。

我可以通過指定滾動=「否」和溢出=「隱藏」來隱藏垂直滾動條，但文本內容仍會抖動。

我在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 

     })

有什麼辦法避免文本內容跳躍/在按下回車鍵移（在超過最小高度自動增長後）？

來源

2011-12-13 Jayaraj

AFAIK解決此問題的唯一方法是更改CKEDitor的代碼。（我會建議在發生時處理'entry key'事件，而不是像他們那樣處於超時狀態）。

來源

2011-12-15 08:40:48 Omeriko

我今天一直在測試一個修復程序，我認爲我有適用於所有主流瀏覽器的工作解決方案。另外，我還修復了水平滾動條大小問題（水平滾動條不增加編輯器的大小）。儘管如此（爲簡單起見，滾動條高度硬編碼爲17個像素），所以我會爲您提供兩種版本，有和沒有水平滾動條修復。

我知道正確的方法是創建一個補丁，並建議它的CKEditor的下一個版本中實現，但需要一段時間，所以同時這裏是你可以做什麼。您可以從下面的鏈接下載經修改的壓縮plugin.js文件，並將其放置在路徑的CKEditor的/plugins/autogrow/plugin.js

沒有水平滾動條的修正：http://www.filedropper.com/plugin_3
隨着水平滾動條修正： http://www.filedropper.com/plugin_1

那麼改變了什麼？

我會通過，而壓縮文件是相當難以閱讀和理解它是可讀壓縮（_source文件夾）的文件解釋這些修改。

我對用於計算編輯器新高度的自動增長臨時標記進行了小的修改。下面是標記碼在_source（未壓縮）自動增長/ 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個像素改變爲零的像素，非斷裂空間總是打印所述標記元件內部並且字體大小被強制爲零。後這些修改這實際上固定的問題 - 代替去除DOM標記立即我改成了通過1個毫秒超時（未壓縮plugin.js文件線24）被移除。

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

水平滾動修復

這是沉悶位。我只是添加了一個檢查編輯器scrollWidth是否大於clientWidth，如果是，則在檢查newHeight的最小和最大允許值之前，將17個像素添加到newHeight和currentHeight變量。

// 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像素硬編碼值，方法在How can I get the browser's scrollbar sizes?（或類似的東西）的descibed可以用來計算滾動條尺寸，使此修復更適當的。

來源

2012-07-17 17:05:15 Perttu

contents.css添加：

體{溢出：隱藏;/隱藏自動增長閃爍 /}

（需要清除高速緩存進行測試）
plugin.js（resizeEditor）設置「由用戶指定的附加空間」= 20：

newHeight + = 20; //修復自動增長閃爍//（參數.config.autoGrow_bottomSpace || 0）;

plugin.js（resizeEditor）取代：

如果（滾動$ scrollHeight屬性> scrollable.clientHeight ...

附：。

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

來源

2013-12-17 12:05:41 SirMoreno

CKEditor的自動增長的插件垂直滾動閃爍問題

回答

相關問題