突出顯示文本，然後將其發送到彈出窗口小部件javascript

我試圖在EmberJS中實現這樣的事情。突出顯示文本，然後將其發送到彈出窗口小部件javascript

在，你可以看到上面的圖片，用戶可以突出顯示某些文本並在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和控制檯登錄，但我卡在如何打開一個窗口小部件並將其正確的位置在某處中間並在該小部件內顯示選定的文本。

來源

2017-03-17 Wild Widow

，只要你想你可以使用灰燼組件用於管理彈出，如果你能CONSOLE.LOG高亮文本的內容，你可以查找這樣的變量：

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

這會觀察你的可變isShowingComponent，這樣你就可以處理這樣在你.hbs

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

唯一剩下這對displayin這樣的風格，如果你要發送的文字，用它做的東西，你可以做這樣的：

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

希望這可以幫助你。

來源

2017-03-18 18:19:07

突出顯示文本，然後將其發送到彈出窗口小部件javascript

回答

相關問題