在 contentEditable 元素中的光标处插入 Ember 组件 [英] 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 组件的 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}}

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