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

Question

我有一个 contentEditable div，我希望允许用户在其中键入文本，以及插入文本框和下拉列表等输入元素。通过允许用户单击可编辑 div.

之外的按钮，元素将插入光标当前所在的位置

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

这基本上是一个

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

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

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

我目前在 Ember 2.5。

Answer 1

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

例如

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

使用my-component-id到ember-虫洞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 组件

Insert Ember component at cursor in contentEditable element

ember.js

ember-cli