在頁面上選擇和突出顯示html的最佳方式是什麼？

我正在尋找一個類似於工具欄的medium.com，當您突出顯示文本選擇時，會在文本頂部彈出工具提示。我正在使用React和Rails。在頁面上選擇和突出顯示html的最佳方式是什麼？

我的思考過程是首先開發一種突出顯示所選文本的方式，然後再將所顯示的文本提示出現在所選文本上方。我想我需要捕獲選定的文本並將其發送到狀態，然後在文檔中搜索該文本並添加一個html標記，其中包含將背景顏色更改爲黃色的類。在我這樣做之後，我可以將這個動作合併到一個按鈕上，這個按鈕將會在工具提示上，所以點擊它會突出顯示文本。

這是我到目前爲止有：

import React from 'react'; 
 

 
class Main extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {text: ''} 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className = "container" onMouseUpCapture={this.handleChange.bind(this)}> 
 
     <h1 className = "headLine" >Medium Markup</h1> 
 
      <p className='editable'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id felis vel sem tristique efficitur. Nunc neque purus, tempor eget urna eu, porttitor congue nulla. Morbi vitae lectus sollicitudin, congue dolor ac, ornare ex. Aenean molestie rutrum mauris, vel ultricies erat pellentesque eget. Nunc at nisi id turpis lobortis ultrices ac eget mi. Cras ac facilisis leo. Vestibulum a enim eget ex tempor pretium. Nunc dignissim bibendum molestie. Fusce imperdiet imperdiet tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec gravida massa. Fusce tristique, nulla vitae porttitor venenatis, mi sem fermentum metus, sit amet auctor mi nisl nec erat.</p> 
 
     
 
     </div> 
 
    ); 
 
    } 
 

 
    handleChange(text) { 
 
    var name = document.documentElement.innerHTML.indexOf(this.state.text); 
 
    console.log(name); 
 
    var text = ""; 
 
    if (window.getSelection) { 
 
     text = window.getSelection().toString(); 
 
    } 
 
    this.setState({text: text.toString()}); 
 
    } 
 
} 
 

 
export default Main;

我知道這是不是很多，但我想我得太多辦法這這裏。任何幫助你們可以給我，將不勝感激。

來源

2017-08-26 Milos

我想你可以有一個組件列表，其中每個組件都有其自己的歷史或任何其他組件，並在家庭組件中顯示組件列表。然後，在家庭組件中，您可以打開所需的工具欄和工具欄組件。因此，您可以將該函數作爲道具傳遞給每個項目列表組件，並將其綁定到家庭組件。

然後每個組件都有一個onClick事件，您可以將該prop作爲函數調用。

我有我爲我的個人項目爲例：讓利活動= this.state.activities.map（功能（活性）{

 return <div> <ListItem 

                 primaryText={activity.name} 
                 leftAvatar={<Avatar style={{backgroundColor: "white"}} 
                      src={activity.icon}/>} 
                 secondaryText={activity.info} 
                 rightIconButton={rightIconMenu(element)} 
                 onTouchTap={element.positionateActivity.bind(element, activity)} 
                 hoverColor="rgb(0, 188, 212)" 
     > <Activity 
        activity={activity}> </Activity></ListItem> 
     </div> 


    }); 
return (
     <div> 

      <SearchSport activities={this.state.activities} filterFunction={this.filterActivities.bind(this)}/> 
      <SelectableList defaultValue={6}> 
       {activities} 
      </SelectableList> 
     </div> 
    );

所有這一切都是在一個「家」組成。而來自Activity組件我有一個onClick事件，我將onTouchTap作爲一個函數調用。

來源

2017-08-26 19:57:26

在頁面上選擇和突出顯示html的最佳方式是什麼？

回答

相關問題