Javascript I'；我试图在我的光标位置上的JoditReact编辑器中插入一些HTML，它以某种方式插入，但并不完全在我的光标位置

我试图在光标位置插入以下块：

插入的文本

我使用了以下方法来获得准确的光标位置：

• 此.jodit.selectionStart
• window.getSelection（）.getRangeAt（0）.startOffset

我的功能按钮单击将其插入行内，但在尝试插入时无法重新捕获更改的光标位置

import React from "react";
import ReactDOM from "react-dom";
import jodit from "jodit";
import "./App.css";
import JoditEditor from "jodit-react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "",
      pos: 0,
    };
  }

  updateContent = (value) => {
    this.setState({
      content: value,
      pos: window.getSelection().getRangeAt(0).startOffset,
    });
  };
  buttonClick = (event) => {
    var abc = this.state.content.slice(
      this.jodit.selectionStart,
      this.jodit.selectionEnd + 1
    );
    var startString = this.state.content.substring(0, this.state.pos + 3);
    var endString = this.state.content.substring(this.jodit.selectionEnd);
    console.log("abc" + startString + "::::::" + endString);
    this.setState({
      content: startString + '<a href="#">Inserted Text</a>' + endString,
    });
  };
  config = {
    readonly: false,
  };
  /**
   * @property Jodit jodit instance of native Jodit
   */
  jodit;
  setRef = (jodit) => (this.jodit = jodit);
  render() {
    return (
      <>
        <JoditEditor
          ref={this.setRef}
          value={this.state.content}
          config={this.config}
          tabIndex={1} // tabIndex of textarea
          onBlur={this.onFocusRemove}
          onChange={this.updateContent}
        />
        <button onClick={this.buttonClick}>insert</button>
      </>
    );
  }
}

export default App;

从“React”导入React；
从“react dom”导入react dom；
从“jodit”导入jodit；
导入“/App.css”；
从“jodit react”导入Joditor；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
内容：“，
位置:0,，
};
}
updateContent=（值）=>{
这是我的国家({
内容:价值,，
位置：window.getSelection（）.getRangeAt（0）.startOffset，
});
};
按钮单击=（事件）=>{
var abc=this.state.content.slice(
this.jodit.selectionStart，
this.jodit.selectionEnd+1
);
var startString=this.state.content.substring（0，this.state.pos+3）；
var endString=this.state.content.substring（this.jodit.selectionEnd）；
log（“abc”+startString+”：：：：“+endString）；
这是我的国家({
内容：开始字符串+''+结束字符串，
});
};
配置={
只读：false，
};
/**
*@property Jodit本地Jodit的Jodit实例
*/
乔迪特；
setRef=（jodit）=>（this.jodit=jodit）；
render（）{
返回(
插入
);
}
}
导出默认应用程序；

我还使用this.jodit.selectionstart而不是window.getSelection（）.getRangeAt（0）尝试了上述代码，但问题仍然存在

---

根据我的分析，每当我们输入一些东西时，onChange处理程序都会更新光标位置，但当我们更改光标位置时，它不会再次更新它。

在配置对象中添加以下内容

config = {
      readonly: false, // all options from https://xdsoft.net/jodit/doc/
      events: 
           { 
            afterInit: (instance) => { this.jodit = instance; } 

}


buttonClick = (event) => { 
     this.jodit.selection.insertHTML('<a href="">Anchor Tag</a>'); 
};

config={
只读：false，//来自的所有选项https://xdsoft.net/jodit/doc/
活动：
{ 
afterInit：（instance）=>{this.jodit=instance；}
}
按钮单击=（事件）=>{
this.jodit.selection.insertHTML（“”）；
};

这样，您将在afterInit之后获得编辑器的实例。 这应该能解决你的问题