突出显示文本，然后将其发送到弹出窗口小部件javascript

我正试图在EmberJS中实现类似的目标

如您所见，在上图中，用户可以突出显示一些文本，当

mouseup

事件发生时，小部件会弹出一些图标。我希望通过显示突出显示文本的小部件实现同样的效果

到目前为止，我得到的是：

export default Component.extend({
  classNames: ['widgetText'],
  didDrag: false,
  startDragPosition: null,
  endDragPosition: null,

  getSelected() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
  },

  mouseUp(e) {
    if (this.get('startDragPosition') && this.get('didDrag')) {
      this.set('endDragPosition', { left: e.pageX, top: e.pageY });
      const selection = this.getSelected();
      console.log(selection);  //I'm able to print my selection, I want this to be sent to a widget and position the widget...?
    }
    this.setProperties({ didDrag: false, startDragPosition: null, endDragPosition: null });
  },

  mouseMove() {
    this.set('didDrag', true);
  },

  mouseDown(e) {
    this.set('startDragPosition', { left: e.pageX, top: e.pageY });
  },

---

我可以得到突出显示的文本和控制台日志，但是我坚持如何打开一个小部件，并正确地将它定位在某个地方，并在该小部件中显示所选的文本。 您可以使用一个管理弹出窗口的余烬组件，如果您可以console.log突出显示文本的内容，您可以查找如下变量：

isShowing():{
    this.togglePropety('isShowingComponent');
}

{{#if isShowingComponent}}
    {{social-buttons close="isShowing" text='the text you already can console.log'}}
{{/if}}

这将观察变量

isShowingComponent

，因此您可以在

中这样处理.hbs

{{#if isShowingComponent}}
    {{social-buttons close="isShowing"}}
{{/if}}

剩下的唯一一件事就是像那样显示的样式，如果您想发送文本来处理它，您可以这样做：

isShowing():{
    this.togglePropety('isShowingComponent');
}

{{#if isShowingComponent}}
    {{social-buttons close="isShowing" text='the text you already can console.log'}}
{{/if}}

希望这对你有帮助