React-Quill：如何在键入时动态替换文本，而不会失去焦点并将光标保持在正确的位置

Question

这个问题专门针对react-quill。我想做的是：在打字时用另一个替换 react-quill 组件中的一些文本。例如：#s1 将被替换为 productname(1eq, 100mg, 10ml)。请注意，我不想使用 JQuery.

到目前为止我是这样做的（下面的代码），但是一旦进行了修改，我就失去了焦点并且不知道如何找回它。控制台上确实抛出了 "The given range isn't in document." 类型的错误所以基本上，它可以工作，但是用户必须单击组件才能继续输入，如果我在页面中有多个 react-quill 组件，它将滚动到第一个 react-quill 对象（这在处理时不方便最后一个）。

class Procedure extends Component {

constructor(props){
    super(props);
    this.state={
        content='';
    }
}

replaceTagByText(value){
   return value.replace(/#(\w+)\s/, myNewValue );
}

handleProcedureContentChange = (value) => {
    let newValue = replaceTagByText(value);
    this.setState({content:newValue});

};

render() {
    return (
      <div>
        <div style={styles.title}>My title</div>
        <ReactQuill
            key={"procedure_RTE_" + this.props.experimentId}
            value={this.state.content}
            modules={modules}
            formats={formats}
            onChange={this.handleProcedureContentChange}
        />

      </div>

    );
  }
}

请注意，代码过于简化，我使用 redux 来提供我的数据，但总体思路在这里。

问题是：如何在打字时正确地替换 react-quill 中的文本，而不会失去焦点并将光标保持在正确的位置。

Answer 1

如果终于找到解决办法。这个想法是跟踪编辑器并设置正确的 setSelection。更新后的代码如下。

class Procedure extends Component {

constructor(props){
    super(props);
    this.state={
        content='';
    }
}

replaceTagByText(value){
   return value.replace(/#(\w+)\s/, myNewValue );
}
//Modification of the code is there
handleProcedureContentChange = (value) => {
    let newValueObject = replaceTagByText(value);
    this.setState({content:newValueObject.value});
    quillRef = this.refs.myQuillRef.getEditor();
    //I need that settimeout to do it after the update of my redux logic
    setTimeout(() => {
      quillRef.focus();
      quillRef.setSelection(newValueObject.indexAfterInsertion, 0, myQuillRef);
    }, 500);

};

render() {
    let myRef = (el) => this.myQuillRef = el;
    return (
      <div>
        <div style={styles.title}>My title</div>
        <ReactQuill
            key={"procedure_RTE_" + this.props.experimentId}
            ref={myRef}
            value={this.state.content}
            modules={modules}
            formats={formats}
            onChange={()this.handleProcedureContentChange}
        />

      </div>

    );
  }
}

React-Quill：如何在键入时动态替换文本，而不会失去焦点并将光标保持在正确的位置

React-Quill : how to dynamically replace a text while typing, without loosing focus and keep the cursor at the correct place

javascript

reactjs

quill