Myujth

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>

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