draft.js:让光标显示在最后面

focus的时候,光标在最前面,如何把光标移到最后面
if(document.activeElement.contentEditable != 'true') { // #1
    const editorState = moveSelectionToEnd(this.state.editorState) //#2
    this.setState({ editorState },()=>{ //#3
        this.domEditor.focus() 
    })            
}
#1 activeElement.contentEditable

粗略的判断:contentEditable就代表是draft.js的编辑器
这么做是为了避免重复focus,不然每次点击编辑框,光标都会跑到最后面

#2 moveSelectionToEnd

封装好的函数,直接拿着用就好了,代码在后面

#3 回调函数

一定要用setState的回调函数,确保在editorState更新之后再focus,
不然不会成功

不要使用redux来管理editorState

setState的回调函数可以确保执行顺序: 先更新,再执行
而redux不能保证更新与执行的先后顺序
比如,

...
dispatch(action) // 改变了store中的editorState,进而导致react重新渲染
domEditor.focus() // 无法确定这行代码 是在react组件更新完成之前还是之后执行
...

最后,moveSelectionToEnd.js

import {  EditorState, SelectionState } from 'draft-js';
const moveSelectionToEnd = (editorState) => {
  const content = editorState.getCurrentContent();
  const blockMap = content.getBlockMap();
  const key = blockMap.last().getKey();
  const length = blockMap.last().getLength();
  const selection = new SelectionState({
      anchorKey: key,
      anchorOffset: length,
      focusKey: key,
      focusOffset: length,
  });
  return EditorState.acceptSelection(editorState, selection);
};
export default moveSelectionToEnd;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值