Javascript CKEditor自动增长插件垂直滚动条闪烁问题

我对CKEditor autogrow插件有问题：

按return（在自动增长超过最小高度后）时，文本内容会抖动（向上跳一行，向下跳一行），垂直滚动条会忽亮忽灭。自动增长是可行的，但用户体验是不稳定的

我可以通过指定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>

---

是否有任何方法可以避免按enter键时文本内容跳转/移动（在自动缩放超过最小高度后）？

AFAIK解决此问题的唯一方法是更改CKEDitor的代码。

---

（我建议在“entry key”事件发生时处理它，而不是像它们那样超时）。

我今天一直在测试一个修复程序，我认为我有一个适用于所有主要浏览器的有效解决方案。此外，我还修复了水平滚动条的大小问题（水平滚动条不会增加编辑器的大小）。不过，这最终有点困难（为了简单起见，滚动条高度是硬编码的17像素），所以我将为您提供两个版本，有水平滚动条修复和没有水平滚动条修复

我知道正确的方法是创建一个补丁，并建议它在下一版本的CKEditor中实现，但这需要一段时间，所以这里是您可以做的。您可以从下面的链接下载修改后的压缩plugin.js文件，并将其放置在路径/plugins/autogrow/plugin.js中的CKEditor中

• 没有水平滚动条修复：
• 使用水平滚动条修复：

发生了什么变化？

我将通过可读的未压缩（_sourcefolder）文件解释这些修改，而压缩文件很难阅读和理解

我对用于计算编辑器新高度的自动增长临时标记做了一些小修改。下面是源代码（未压缩）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 );

水平滚动条修复

这有点无聊。我刚刚添加了一个检查编辑器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像素硬编码值，可以使用中描述的方法（或类似方法）来计算滚动条大小，以使此修复更合适

contents.css添加：

正文{溢出：隐藏；/Hide Autogrow flicker/}

（需要清除缓存以进行测试）

plugin.js（resizeEditor）设置“用户指定的额外空间”=20：

新高度+=20//修复自动增长闪烁//（editor.config.Autogrow_bottomSpace | | 0）

plugin.js（resizeEditor）替换：

如果（可滚动.$.scrollHeight>可滚动.clientHeight

与：

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

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

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