我在我的项目中发现了一些奇怪的错误,所以在summernote网站上example:
#content {
width: 100%;
padding: 50px 0;
height: 150px;
}
#summernote {
width: 100%;
height: 100%;
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
</head>
<body>
<div id="content">
<div id="summernote"></div>
<script>
$('#summernote').summernote({
placeholder: 'Write your blog content here...',
tabsize: 1,
height: 100,
focus: true
});
</script>
</div>
</body>
</html>
尝试在完整窗口中打开此示例,并调整编辑器大于完整窗口高度。尝试向下滚动,当你用按钮滚动选项卡后,你会得到一些错误。
同样在我的项目上它做到了但是我添加了额外的div,现在当我用按钮滚动选项卡时,编辑器隐藏了除边框之外的所有内容 - 这是一个屏幕截图:
你的问题由gif图像呈现:https://github.com/summernote/summernote/issues/3126#issue-399125267
并回答是:
只需更改summernote-lite.js - 从这里: -
if ((currentOffset > activateOffset) && (currentOffset < deactivateOffsetBottom)) {
this.$toolbar.css({
position: 'fixed',
top: otherBarHeight,
width: editorWidth
});
}
对此: -
if ((currentOffset > activateOffset) && (currentOffset < deactivateOffsetBottom)) {
this.$toolbar.css({
position: 'relative',
top: otherBarHeight,
width: editorWidth
});
}
这个改变对我有用...... https://github.com/summernote/summernote/issues/3126#issuecomment-466647611
在summernote选项中设置followToolbar:false:
$('#summernote').summernote({
placeholder: 'Write your blog content here...',
tabsize: 1,
height: 100,
focus: true,
followingToolbar: false,
});