我有一个内容可编辑div，我希望允许用户在其中键入文本，以及插入输入元素，例如文本框和下拉列表。通过允许用户单击可编辑 div 外部的按钮，元素将插入到光标当前所在的位置。
按照这个一般示例，我让它运行得很好：
http://jsfiddle.net/jwvha/1/
这基本上做了一个
document.selection.createRange().pasteHTML(html);
问题是它期望将 HTML 传递到在光标处插入元素的函数中。对于更复杂的事情，我希望能够插入具有可用完整 html/js 逻辑的 Ember 组件，而不是尝试将所有 html/js 放入字符串中。
有没有一种方法可以以编程方式创建组件并将其插入到光标处的 contentEditable 元素中，同时保持其功能（例如操作等）。
我目前使用的是 Ember 2.5。
我想你可以使用一个叫做 ember-cli 的插件余烬虫洞。这个组件的作用基本上是将你的 ember 组件的 dom 移动到一个包含id属性。
e.g.
document.selection.createRange().pasteHTML('<div id="my-component-id"></div>');
use 我的组件 ID到余烬虫洞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}}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
