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的自动增长的插件垂直滚动闪烁问题

回答

相关问题