我正在使用RTF编辑器,并尝试在所需的光标位置插入文件或某些图像。但是,没有在文本之间,两个文件之间或两个图像之间添加文件或图像,而是在图像/文件末尾添加了文件或图像。
我应该怎么做才能在所需的光标位置添加任何图像/文本/文件。
我正在尝试在ios
移动应用和野生动物园浏览器中实现此功能,但这也许不是浏览器特定的问题。
<div id="editor" contenteditable="true"></div>
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);
}