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 issue

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