I am using a rich text editor and trying to insert file or some image at the desired cursor position. But, the files or image is not being added in between text or in between two files or in between two images, it is being added at the end of image/file.
What should I do so that any image/text/file get added at desired cursor position.
I am trying to implement this in ios
mobile app and safari browser but perhaps it is not a browser-specific issue.
<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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.