draft.js:如何改變 draft.js 編輯框的高度
阿新 • • 發佈:2018-11-11
draft.js的<Editor />
元件,實際佔位只有一行,
想要輸入文字只能點第一行,點選其他地方無法focus,
關鍵是 它還不接受style和class屬性,無法改變高度
既然無法把它的高度撐開,那就換一個思路:
只要點選空白區域就能focus,
那就和調整高度是一個效果
手動focus
先拿到editor的ref,
constructor(props) {
super(props)
this.setDomEditorRef = ref => this.domEditor = ref
}
然後
focus(){
this.domEditor.focus()
}
<div onClick={this.focus.bind(this)} style={{height:'100%'}}>
<Editor ... />
</div>
就可以點選空白區域focus了
消除副作用
這還沒完,
每次點選整個編輯器區域 都會focus,游標都會跑到第一行第一個,
這就沒法編輯了,
一個簡單的辦法,如果我們的編輯器已經激活了,那麼就不要執行
(假設我們的contentEditable只有一個)
focus(){
if (document.activeElement.contentEditable != 'true') {
this.domEditor.focus()
}
}
移動游標位置
每次啟用,游標都會跑到第一行第一個,怎麼辦呢
另一篇博文 draft.js:讓游標顯示在最後面