jQuery/Javascript Element nach dem aktuellen Absatz im Inhalt editierbar einfügen

Question

Ich verwende Medium.js Editor-Skript, das mit contenteditablediv s hilft.

Aber ich möchte auch das Hinzufügen von Bildern besser machen und mehr wie Medium.js selbst tut.

Derzeit bin ich mit dieser Funktion einen Knoten an der aktuellen Cursorpunkt einzufügen:

function insertImageAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection(); 
    range = sel.getRangeAt(0); 
    range.deleteContents(); 

    var descriptionNode = document.createElement("img"); 
    descriptionNode.className = "img"; 
    descriptionNode.src = text; 

    range.insertNode(descriptionNode); 
    range.setStartAfter(descriptionNode); 

    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

Dies funktioniert, aber ich Stylingfragen bin vor, wo ich bin derzeit in einer Absatz- und Typisierung, dann ein einfügen Bild werde ich mit Inhalt wie am Ende:

<p> 
    this is a paragraph and I have inserted a image 
    <img src="insertimage.png"/> 
</p> 

Wirklich, sollte ich das figure Element verwenden und es würde das Bild außerhalb des aktuellen Absatzes einzufügen. Auf diese Weise würde ich beim Hinzufügen eines Bildes im aktuellen Element nicht hinzugefügt werden, sondern stattdessen nach und als ein figure Element. Ich kann das Bild nicht einfach anhängen, da ich möchte, dass Benutzer in der Lage sind, einen Blogpost zu bearbeiten und ein Bild an beliebiger Stelle einzufügen.

Irgendwelche Hilfe zu diesem Thema? Es gibt bereits ein Plugin:

Aber die Abhängigkeiten sind mehr als ich verwenden möchte und ich habe bereits Bild-Upload usw. funktioniert. Nur müssen die Bilder besser eingefügt werden.

Answer 1

können Sie die <p> in zwei <p> Tags teilen und die zwischen diesen <p> Tags hinzufügen. Hier ist ein Beispielcode. Es ist nicht fehlerfrei :).

http://codepen.io/anon/pen/RaOpbr

function insertImageAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection(); 
    range = sel.getRangeAt(0); 

    var para = getParagraph(range.startContainer); 
     range.deleteContents(); 

    range.setEndAfter(para); 

    var newPara = document.createElement("p"); 
    newPara.innerHTML = range.toString(); 
    range.deleteContents(); 

    para.parentElement.appendChild(newPara); 
    para.parentElement.insertBefore(para, newPara); 

    var descriptionNode = document.createElement("img"); 
    descriptionNode.className = "img"; 
    descriptionNode.src = text; 

    para.parentElement.insertBefore(descriptionNode, newPara); 

    range.setStart(newPara, 0); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

function getParagraph(node) { 
    var para = node; 
    while (para.parentElement !== null && (para.tagName == null || para.tagName.toLowerCase() !== 'p')) { 

    para = para.parentElement; 
    } 
    return para; 
}