document execCommand不使用canvas元素

Question

我正在尝试创建一个文本编辑器。在这我使用contenteditable div我必须创建多个canvas元素，但当我使用

创建它

var A = "<canvas style='border:1px solid' id='matharea'
class='mathdoxformula'></canvas>";
document.execCommand("insertHTML", A,null);

它会产生光标问题，当退格时按下它会删除所有画布元素。 我需要逐个删除。我认为这个问题是因为两个元素之间没有空格，但是当我创建 textarea 只是为了检查时它工作正常。

必需的输出  我可以在任何光标位置创建canvas元素  2.在两个canvas元素之间需要一个光标距离，所以我可以在元素之间写入可编辑的div。  3.逐个删除canvas元素

在此图片中

DARK BOLD BLACK BOX：contenteditable div

BLACK BOX INSIDE DIV：画布元素

RED COLOR LINE：光标指向

我使用了document.execCommand，因为要将canvas元素放在任何光标位置。帮助我。

限制：仅使用JavaScript和HTML