Insert Ember Components, t am Cursor in contentEditable Element

Ich habe ein contentEditable div, wo ich Benutzern erlauben möchte, Text einzugeben sowie Eingabeelemente wie Textfelder und Dropdowns einzufügen. Die Elemente werden dort eingefügt, wo sich der Cursor gerade befindet, indem der Benutzer auf eine Schaltfläche außerhalb des bearbeitbaren Bereichs klicken kann.

Ich habe es ziemlich gut funktioniert, wenn ich diesem allgemeinen Beispiel folge:

http: //jsfiddle.net/jwvha/1

was macht im Grunde ein

document.selection.createRange().pasteHTML(html);

Das Problem ist, dass erwartet wird, dass HTML an die Funktion übergeben wird, die das Element am Cursor einfügt. Für komplexere Dinge möchte ich in der Lage sein, Ember-Komponenten mit vollständiger verfügbarer HTML / JS-Logik einzufügen, anstatt zu versuchen, alle HTML / JS in einen String zu setzen.

Ist es eine Möglichkeit, eine Komponente programmgesteuert zu erstellen UND sie an der Cursorposition in ein contentEditable-Element einzufügen, während die Funktionalität (z. B. Aktionen usw.) erhalten bleibt?

Ich bin derzeit auf Ember 2.5.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage