如何阻止 DraftJS 光标跳到文本的开头？

Posted 2023-03-08

【中文标题】如何阻止 DraftJS 光标跳到文本的开头？

【英文标题】：How to stop DraftJS cursor jumping to beginning of text?

【发布时间】：2017-10-07 16:56:04

【问题描述】：

涉及使用 DraftJS 和 Meteor Js 应用程序的代码 任务 - 进行实时预览，其中来自 DraftJS 的文本将保存到 DB，而 DB 中的文本将显示在另一个组件上。

但问题是一旦数据来自数据库，我尝试编辑 DraftJS 光标移动到开头。

代码是

import Editor, EditorState, ContentState from 'draft-js';
import React,  Component  from 'react';
import  TestDB  from '../api/yaml-component.js';
import  createContainer  from 'meteor/react-meteor-data';
import PropTypes from 'prop-types';

class EditorComponent extends Component 
  constructor(props) 
    super(props);
    this.state = 
        editorState : EditorState.createEmpty(),
    ;
  

  componentWillReceiveProps(nextProps) 
    console.log('Receiving Props');
    if (!nextProps) return;
    console.log(nextProps);
    let j = nextProps.testDB[0];
    let c = ContentState.createFromText(j.text);
    this.setState(
      editorState: EditorState.createWithContent(c),
    )
  

  insertToDB(finalComponentStructure) 
    if (!finalComponentStructure) return;
    finalComponentStructure.author = 'Sandeep3005';
    Meteor.call('testDB.insert', finalComponentStructure);
  


  _handleChange(editorState) 
    console.log('Inside handle change');
    let contentState = editorState.getCurrentContent();
    this.insertToDB(text: contentState.getPlainText());
    this.setState(editorState);
  

  render() 
    return (
      <div>
        <Editor
          placeholder="Insert YAML Here"
          editorState=this.state.editorState
          onChange=this._handleChange.bind(this)
        />
      </div>
    );
  



    EditorComponent.propTypes = 
     staff: PropTypes.array.isRequired,
    ;

    export default createContainer(() => 
      return 
        staff: Staff.find().fetch(),
      ;
    , EditorComponent);

任何正确方向的有用评论都会很有用

【参考方案1】：

当您调用EditorState.createWithContent(c) 时，Draft 将为您返回一个新的EditorState，但它不知道您当前的SelectionState。相反，它只会在您的新ContentState 的第一个块中创建一个新的空选择。

要克服这个问题，您必须自己设置SelectionState，使用当前状态的SelectionState，例如：

const stateWithContent = EditorState.createWithContent(c)
const currentSelection = this.state.editorState.getSelection()
const stateWithContentAndSelection = EditorState.forceSelection(stateWithContent, currentSelection)

this.setState(
  editorState: stateWithContentAndSelection
)

【讨论】：

这种情况下如何保留占位符？

【参考方案2】：

有一个属性可以将焦点移到结尾：

const newState = EditorState.createEmpty()
this.setState(
 editorState:
  EditorState.moveFocusToEnd(newState)
 )

这对我有用。

【讨论】：

此解决方案将导致光标始终在末尾具有焦点。如果用户将光标移到中间，它仍然会跳到末尾。

【参考方案3】：

您需要做的就是将给定的EditorState 传递到内置的静态EditorState.moveSelectionToEnd() 方法中：

const editorState = EditorState.createEmpty();
const editorStateWithFocusOnTheEnd = EditorState.moveSelectionToEnd(editorState)