Question

我遇到了CKEditor自动增长插件的问题：

按下返回（自动生长超过最小高度后），文本内容会抖动（向上跳一行并向下跳），垂直滚动条会闪烁。自动增长功能可行，但用户体验不稳定。

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

        })

有没有办法在按下回车键时（自动调整超过最小高度后）避免文本内容跳转/移位？

Answer 1

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

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

没有水平滚动条修复：http://www.filedropper.com/plugin_3
使用水平滚动条修复：http://www.filedropper.com/plugin_1

那么改变了什么？

我将通过未压缩的（_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像素变为零像素，标记元素内部始终打印不间断空格，并且字体大小强制为零。在这些修改之后，这实际上修复了问题 - 而是立即从DOM中删除标记我将其更改为通过1毫秒超时（未压缩的plugin.js文件中的第24行）删除。

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

水平滚动条修复

这有点沉闷。我刚刚添加了一个检查，编辑器scrollWidth是否大于clientWidth，如果是，那么在检查newHeight最小和最大允许值之前，将new像素和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像素硬编码值，可以使用How can I get the browser's scrollbar sizes?中描述的方法（或类似的东西）来计算滚动条大小，以使此修复更合适。

Answer 2

contents.css add：

body {overflow：hidden; / 隐藏自动增长闪烁 /}

（需要清除缓存以进行测试）
plugin.js（resizeEditor）设置“用户指定的额外空间”= 20：

newHeight + = 20; //修复自动增长闪烁//（edit.config.autoGrow_bottomSpace || 0）;

plugin.js（resizeEditor）替换：

if（scrollable。$。scrollHeight＆gt; 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');

Answer 3

AFAIK解决此问题的唯一方法是改变CKEDitor的代码。（我会建议处理“入口密钥”事件，因为它们会发生，而不是在超时时）。

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

3 个答案: