Вставить / прикрепить текст или изображение или файлы в виде строки html в текстовом редакторе в позиции курсора - PullRequest
Новая
       13

Вставить / прикрепить текст или изображение или файлы в виде строки html в текстовом редакторе в позиции курсора

0 голосов
/ 15 ноября 2018

Я использую текстовый редактор и пытаюсь вставить файл или изображение в нужную позицию курсора.Но файлы или изображения не добавляются между текстом или между двумя файлами или между двумя изображениями, они добавляются в конец изображения / файла.

Что делать, чтобы любое изображение/ text / file добавляется в нужную позицию курсора.

Я пытаюсь реализовать это в 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);
}
...