Javascript 将文本拖放到具有多行文本（基本上是内部元素）的可编辑div中

几天来，我一直在努力完成这项工作，但似乎我需要再次寻求外部帮助

这就是我被赋予的任务。我必须创建一个具有一些基本功能的html文本编辑器。这就是它看起来的样子：

这一切都是手动完成的-尽可能没有外部资源-使用React和Typescript/ES6

现在，电子邮件正文是一个DIV，可以编辑

<div id="EditableDIV" className="textarea" contentEditable={true} onDragOver={this.onDragOver} onDrop={this.drop}></div>

在这里，我试图跟踪插入符号的位置。这样我就可以（尝试…）将我的文本放到某个位置

drop = (e) => {
    e.preventDefault();
    let sel = document.getSelection();
    let data = e.dataTransfer.getData("text/html");
    let startString = sel.focusNode.textContent.substring(0, this._caretPosition);
    let endString = sel.focusNode.textContent.substring(this._caretPosition, sel.focusNode.textContent.length);
    this._container.textContent = `${startString}${data}${endString}`;
}

现在，需要记住的是，如果我这样做：

底层HTML更改如下：

我认为这也给我的拖放解决方案带来了问题，因为现在还有一些元素被创建为用户类型

拖动字段时，我可以看到光标移动：

但是，在松开鼠标按钮开始下降后，会发生以下情况：

查看-字段位于最后一个插入符号位置（我键入的最后一个位置）。看起来这件事不尊重我的位置。这和我们的计划有关系吗

document.getSelection（）

如果我先在要插入已删除字段的文本之间单击，然后再进行另一次删除，它似乎可以工作：

刚刚发生的事情是，它将文本放在正确的行中，但也放在元素被删除的插入符号位置（从行的开始）

是否有一种方法可以将插入符号的位置设置为正在删除的位置？还是一个更好的方法来获得插入符号位置

提前谢谢

onDragOver = (e) => {
    this._caretPosition = document.caretRangeFromPoint(e.pageX,e.pageY).startOffset;
}

drop = (e) => {
    e.preventDefault();
    let sel = document.getSelection();
    let data = e.dataTransfer.getData("text/html");
    let startString = sel.focusNode.textContent.substring(0, this._caretPosition);
    let endString = sel.focusNode.textContent.substring(this._caretPosition, sel.focusNode.textContent.length);
    this._container.textContent = `${startString}${data}${endString}`;
}