如何增大react-draft-wysiwyg编辑器默认文本输入窗口的高度

问题原因 #

你通过editorClassName绑定的editor-height类仅作用在编辑器的外层容器上，真正响应输入的文本区域是容器内部类名为.public-DraftEditor-content的DOM节点，所以仅修改外层高度不会同步到输入区。

解决方案 #

有两种常用实现方式，任选其一即可：

方式1：修改CSS选择器命中输入区 #

调整你现有的CSS代码即可：

/* 外层容器高度适配 */
.editor-height {
  min-height: 300px;
}
/* 命中内部实际可输入区域 */
.editor-height .public-DraftEditor-content {
  min-height: 300px;
  overflow: auto;
}

方式2：使用组件自带属性内联设置（无需额外写CSS） #

直接给Editor组件传递editorStyle属性，样式会直接作用在输入区节点上：

const [editorState, onEditorStateChange ] = useState(EditorState.createEmpty());

return(
...
<Editor 
  editorState={editorState} 
  onEditorStateChange={onEditorStateChange} 
  editorStyle={{
    minHeight: '300px',
    overflow: 'auto'
  }}
/>                              

注意事项 #

• 如果你的项目开启了CSS Modules、Scoped CSS等样式隔离能力，需要给.public-DraftEditor-content声明全局作用域：比如React CSS Modules中写:global(.public-DraftEditor-content)，Vue scoped样式中写::v-deep .public-DraftEditor-content，避免样式被隔离失效。

内容的提问来源于stack exchange，提问作者Schoolboy