在页面上选择和突出显示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;

我知道这是不是很多，但我想我得太多办法这这里。任何帮助你们可以给我，将不胜感激。

答

我想你可以有一个组件列表，其中每个组件都有其自己的历史或任何其他组件，并在家庭组件中显示组件列表。然后，在家庭组件中，您可以打开所需的工具栏和工具栏组件。因此，您可以将该函数作为道具传递给每个项目列表组件，并将其绑定到家庭组件。

然后每个组件都有一个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作为一个函数调用。

在页面上选择和突出显示html的最佳方式是什么？

相关推荐