javascript React-Draft-Wysiwyg:在新行上自动滚动

mnemlml8  于 2023-05-27  发布在  Java
关注(0)|答案(3)|浏览(128)

我怎样才能使编辑器的输入在新的一行输入时自动向下滚动?就像在www.example.com的例子6中https://jpuri.github.io/react-draft-wysiwyg/#/demo。现在滚动条停留在顶部,文本光标在底部边框以下时隐藏。

zengzsys

zengzsys1#

我现在也在纠结这个问题。这就是我现在的成就

const scrollDiv = document.querySelector('.my_editor_class')            
scrollDiv.scrollTop = scrollDiv.scrollHeight

这样你就可以在输入新行时使滚动条跟随文本光标。但请记住,如果文本光标不在编辑器的最后一个可见区域,并点击Enter按钮,滚动条将滚动到最后...非常糟糕的用户体验。
你可以做的是创建一个算法来根据文本光标聚焦的位置调整位置。至少我是这么想的等待建议:)
另见此github issue

6rvt4ljy

6rvt4ljy2#

只需将动态导入移动到所有组件之外。

a14dhokn

a14dhokn3#

div.DraftEditor-root {
    border: 1px solid #C0C0C0;
    height: 200px;
    width: auto;
    overflow-y: auto;
}

div.DraftEditor-editorContainer,
div.public-DraftEditor-content {
    height: 100%;
}

你可以在这里找到详细的答案https://dev.to/tumee/how-to-style-draft-js-editor-3da2

相关问题