在RTF文本编辑器中的光标位置处以html字符串形式将文本或图像或文件插入/附加

Question

我正在使用RTF编辑器，并尝试在所需的光标位置插入文件或某些图像。 但是，没有在文本之间，两个文件之间或两个图像之间添加文件或图像，而是在图像/文件的末尾添加了文件或图像。

我该怎么做，以便将任何图像/文本/文件添加到所需的光标位置。

我正在尝试在ios移动应用程序和safari浏览器中实现此功能，但这也许不是特定于浏览器的问题。

<div id="editor" contenteditable="true"></div>

editor.js内

 var RTE = {};

RTE.editor = document.getElementById("editor");

RTE.insertFileComponent = function(fileId, fileName, fileSize, type, componentId) {
    var htmlTag = '<div contenteditable="false" class="attach"><div class="fileMetaData">'+ fileName +'</div>';
    document.getElementById('editor').focus();
    RTE.insertHTML(htmlTag);
    RTE.updateContentOffset();
    window.webkit.messageHandlers.general.postMessage("input");
    }

RTE.updateContentOffset = function() {
    var object = {
    caretYPosition: RTE.getCaretYPosition(),
    lineHeight: RTE.getLineHeight()
    };
    window.webkit.messageHandlers.offsetDidChange.postMessage(object);
    };


    RTE.insertHTML = function(html) {
         RTE.restorerange();
         document.getElementById('editor').focus();
         document.execCommand('insertHTML', false, html);
         RTE.updateHeight();
    };


    RTE.updateHeight = function() {
     var object = {
    clientHeight: document.getElementById('editor').clientHeight,
    relativeCaretYPosition: RTE.getRelativeCaretYPosition(),
    lineHeight: RTE.getLineHeight()
    };
     window.webkit.messageHandlers.heightDidChange.postMessage(object);
    };


RTE.restorerange = function() {
 var selection = window.getSelection();
selection.removeAllRanges();
 var range = document.createRange();
 range.setStart(RTE.currentSelection.startContainer, RTE.currentSelection.startOffset);
range.setEnd(RTE.currentSelection.endContainer, RTE.currentSelection.endOffset);
selection.addRange(range);
}