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

Question

我试图在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 });
  },

我能够让highlighted text和控制台记录它，但我仍然坚持如何打开一个小部件并将其正确放置在某个位置的中间并在里面显示所选文本那个小部件。

Answer 1

您可以根据需要使用管理弹出窗口的Ember组件，如果您可以控制突出显示文本的内容，则可以查找如下变量：

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

这会观察您的变量isShowingComponent，因此您可以在.hbs

中按照这样处理

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

唯一让它成为这样的展示风格，如果你想发送文字来做一些事情，你可以这样做：

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

希望这会对你有所帮助。