在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);
}