在 contentEditable 元素中的光标处插入 Ember 组件

【问题标题】：Insert Ember component at cursor in contentEditable element在 contentEditable 元素中的光标处插入 Ember 组件
【发布时间】：2016-06-08 23:55:51
【问题描述】：

我有一个 contentEditable div，我希望用户可以在其中键入文本，以及插入文本框和下拉菜单等输入元素。通过允许用户单击可编辑 div 之外的按钮，元素将插入到光标当前所在的位置。

按照这个一般示例，我让它运行得很好：

http://jsfiddle.net/jwvha/1/

这基本上是一个

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

问题在于它希望将 HTML 传递给在光标处插入元素的函数。对于更复杂的事情，我希望能够插入具有完整 html/js 逻辑的 Ember 组件，而不是尝试将所有 html/js 放入字符串中。

有没有办法以编程方式创建组件并将其插入光标处的 contentEditable 元素中，同时保持其功能，例如操作等。

我目前使用的是 Ember 2.5。

【问题讨论】：

标签： ember.js ember-cli

【解决方案1】：

我认为您可以使用名为 ember-wormhole 的 ember-cli 插件。这个组件所做的基本上是将你的 ember 组件的 dom 移动到一个包含 id 属性的 html 元素。

例如

document.selection.createRange().pasteHTML('<div id="my-component-id"></div>');

使用 my-component-id 到 ember-wormhole destinantion 属性：

{{#ember-wormhole to="my-component-id"}}
    {{my-component...}}
{{/ember-wormhole}}

对此，您可以执行以下操作：

click() {
    let componentId = 'my-component-id';

    document.selection.createRange().pasteHTML(`<div id="${componentId}"></div>`);
    this.get('components').pushObject(componentId); // components being an array
}

在您的车把模板中：

{{#each components as |componentId|}}
    {{#ember-wormhole to=componentId}}
        {{my-component...}}
    {{/ember-wormhole}}
{{/each}}

【讨论】：

在用户单击按钮创建组件之前，我不会拥有组件。