javascript - React-Draft-Wysiwyg：自动滚动新行

Question

如何使编辑器的输入在新行输入时自动向下滚动？就像在https://jpuri.github.io/react-draft-wysiwyg/#/demo的示例 6 中一样。现在滚动停留在顶部，文本光标在低于底部边框时隐藏。

Answer 1

目前，我也在努力解决这个问题。这就是我现在所取得的

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

有了这个，您可以在输入新行时使滚动条跟随文本光标。但请记住，如果文本光标不在编辑器的最后一个可见区域中，并按下 Enter 按钮，滚动条将滚动到最后……非常糟糕的用户体验。

您可以做的是创建一个算法来根据文本光标焦点的位置调整位置。至少，这是我想到的。等待建议:)

另请参阅此 github问题

Answer 2

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