Question

我有一个 contentEditable div，我想让用户输入文字，以及插入文本框和下拉列表等输入元素。通过允许用户单击可编辑div外的按钮，元素将插入光标当前所在的位置。

按照这个一般例子，我得到了很好的工作：

基本上做了

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

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

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

我目前正在使用Ember 2.5。

Answer 1

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

e.g。

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}}

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

1 个答案: