8

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

        })

有什么方法可以避免文本内容在按下回车键时跳跃/移动（在自动增长超过最小高度之后）？

4

3 回答 3

2

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

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

那么改变了什么？

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

我对用于计算编辑器新高度的自动增长临时标记做了一些小修改。这是 _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 像素，始终在标记元素内打印不间断的空格，并且字体大小被强制为零。在这些修改之后，这实际上解决了这个问题 - 而是立即从 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 像素硬编码值，而是如何获取浏览器的滚动条大小？（或类似的东西）可用于计算滚动条大小以使此修复更合适。

于 2012-07-17T17:05:15.513 回答
1

  1. 内容.css 添加：

    身体{溢出：隐藏；/隐藏自动增长闪烁/}

    （需要清除缓存才能测试）

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

新高度 += 20；//修复自动增长闪烁 //(editor.config.autoGrow_bottomSpace || 0);

  1. plugin.js (resizeEditor) 替换：

if (scrollable.$.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-17T12:05:41.650 回答
0

AFAIK 解决此问题的唯一方法是更改​​ CKEEditor 的代码。（我建议在发生时处理“输入键”事件，而不是像他们那样超时）。

于 2011-12-15T08:40:48.477 回答