CKEditor自动增长插件垂直滚动条闪烁问题
CKEditor autogrow plugin vertical scrollbar flickering issue
我有一个问题与CKEditor自动增长插件:
按回车键时(在自动增长超过最小高度后),文本内容抖动(向上跳一行然后向下跳一行),并且垂直滚动条闪烁开关。自动增长的工作,但用户体验是不稳定的。
我可以通过指定scroll ="no"和overflow="hidden"来隐藏垂直滚动条,但是文本内容仍然晃动。
我在ceditor .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
})
是否有任何方法可以避免文本内容在按下回车键后跳跃/移动(在自动增长超过最小高度后)?
我今天一直在测试修复,我认为我有一个适用于所有主要浏览器的工作解决方案。此外,我还修复了水平滚动条大小问题(水平滚动条不会增加编辑器的大小)。这最终有点拼凑(为了简单起见,滚动条的高度是硬编码的17像素),所以我将为您提供两个版本,有和没有水平滚动条修复。
我知道正确的方法是创建一个补丁,并建议它在CKEditor的下一个版本中实现,但这需要一段时间,所以同时这里是你能做的。您可以从下面的链接下载修改后的压缩plugin.js文件,并将其放在CKEditor的路径/plugins/autogrow/plugin.js
- 没有水平滚动条修复:http://www.filedropper.com/plugin_3
- 与水平滚动条修复:http://www.filedropper.com/plugin_1
改变了什么?
我将通过未压缩(_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;"> </span>', doc );
所以高度从1像素变为0像素,在marker元素内总是打印一个不间断的空格,字体大小被强制为零。在这些修改之后,这实际上解决了这个问题-而不是立即从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像素硬编码值,方法描述了如何获得浏览器's滚动条大小?(或类似的东西)可以用来计算滚动条的大小,使这个修复更合适。
-
contents.css添加:
身体{溢出:隐藏;/隐藏自动生长闪烁/}
(需要清空缓存进行测试)
-
plugin.js (resizeEditor) Set "Additional space specified by user" = 20:
newHeight += 20;//修复自动生长闪烁//(editor.config. conf)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');
我想解决这个问题的唯一方法是改变CKEDitor的代码。(我建议在'entry key'事件发生时处理它,而不是像它们那样在超时时处理)。
- CodeMirror.禁用垂直滚动条
- Jquery干扰后隐藏垂直滚动条
- 选择/选项中的垂直滚动条
- 如何隐藏多个图像容器的垂直滚动条
- 当我将水平滚动条移到最左边时,垂直滚动条不可见
- Ace编辑器通过垂直滚动条隐藏最后的相扑
- 删除垂直滚动条而不附加元素换行
- JQuery:手风琴高度样式:填充导致垂直滚动条
- jQuery 获取文档宽度和高度,不包括水平/垂直滚动条
- 让垂直滚动条始终显示 css
- JavaScript .toggle - 垂直滚动条上升
- 带有一些固定像素的垂直滚动条
- 没有固定宽度的正文垂直滚动条
- 带/不带垂直滚动条的帮助窗口
- 如何实现脸书聊天垂直滚动条样式
- 如何滚动垂直滚动条(而不是整个页面)
- 连续图像垂直滚动条
- 为什么垂直滚动条没有't,尽管设置了垂直溢出
- 是否可以使实体.css模式更大并删除垂直滚动条
- 具有垂直滚动条的水平滚动条页面导航