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

这个问题专门针对react quill。 我想做的是：打字时用另一个替换react羽毛笔组件中的一些文本。例如：

#s1

将被类似于

productname（1eq，100mg，10ml）

的东西取代。请注意，我不想使用JQuery

到目前为止，我是这样做的（代码如下），但一旦修改完成，我就失去了焦点，不知道如何恢复。控制台上的More确实抛出类型为“给定范围不在文档中”的错误 所以基本上，它是可以工作的，但是用户必须点击组件继续键入，如果页面中有多个react quill组件，它将滚动到firt react quill对象（在处理最后一个对象时，这并不方便）

类过程扩展组件{
建造师（道具）{
超级（道具）；
这个州={
内容=''；
}
}
replaceTagByText（值）{
返回值。替换（/#（\w+）\s/，myNewValue）；
}
handleProcedureContentChange=（值）=>{
让newValue=replaceTagByText（值）；
this.setState（{content:newValue}）；
};
render（）{
返回(
我的头衔
);
}
}

请注意，代码过于简化，我使用redux来提供数据，但总体思路如下

---

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

如果最终找到解决方案。这样做的目的是跟踪编辑，并设定正确的选择。更新后的代码如下

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>

    );
  }
}

类过程扩展组件{
建造师（道具）{
超级（道具）；
这个州={
内容=''；
}
}
replaceTagByText（值）{
返回值。替换（/#（\w+）\s/，myNewValue）；
}
//代码的修改就在那里
handleProcedureContentChange=（值）=>{
让newValueObject=replaceTagByText（值）；
this.setState（{content:newValueObject.value}）；
quillRef=this.refs.myQuillRef.getEditor（）；
//我需要settimeout在我的redux逻辑更新之后执行它
设置超时（（）=>{
quillRef.focus（）；
quillRef.setSelection（newValueObject.indexAfterInsertion，0，myQuillRef）；
}, 500);
};
render（）{
让myRef=（el）=>this.myQuillRef=el；
返回(
我的头衔
);
}
}

这适用于纯文本，但如果要将文本包装到html标记中，该怎么办？例如，无论您的正则表达式返回什么，假设您希望将其包装在

标记中，使其成为链接。有什么想法吗？@silencedogood，然后编写正确的代码，由quill解释为链接。我不记得怎么写了，但是羽毛笔中的数据是纯文本，所以只需在其中写正确的标记。看这里：还有这里。祝你好运

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>

    );
  }
}