将Ember组件插入到contentEditable元素中 [英] Insert Ember component at cursor in contentEditable element

问题描述

我有一个 contentEditable div，我想允许用户键入文本，以及插入输入元素（如文本框和下拉列表）。这些元素将被插入光标当前所在的位置，允许用户单击可编辑div外的按钮。

I have a contentEditable div where I want to allow users to type text, as well as insert input elements such as text boxes and dropdowns. The elements will be inserted where the cursor currently is, by allowing the user to click a button outside the editable div.

我已经很好地按照这个一般的例子：

I got it working pretty well following this general example:

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

其中基本上是

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

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

The problem is that it expects HTML to be passed into the function which inserts the element at cursor. For more complex things, I'd like to be able to insert Ember components with full html/js logic available, instead of trying to put all html/js into a string.

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

Is there a way to programmatically create a component AND insert it into a contentEditable element at cursor, while maintaining its functionality, such as actions, etc.

我是在Ember 2.5目前。

I'm on Ember 2.5 currently.

推荐答案

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

I think you could use a ember-cli plugin called ember-wormhole. What this component do is basically move the dom of you ember component to an html element that contains an id attribute.

例如

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

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

use my-component-id to ember-wormhole destinantion attribute:

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

关于这一点，您可以执行以下操作：

Regarding that, you could do something like:

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

这篇关于将Ember组件插入到contentEditable元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！