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

Question

我想制作一个类似 medium.com 的工具栏，当您突出显示所选文本时，工具提示会在文本顶部弹出。我在这上面使用了 React 和 Rails。

我的想法是首先开发一种方法来突出显示所选文本，然后再弄乱显示在所选文本上方的工具提示。我想我需要捕获选定的文本并将其发送到状态，然后在文档中搜索该文本并添加一个 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;

我知道这并不多，但我认为我在这里想得太多了。如果你们能给我任何帮助，我将不胜感激。

Answer 1

我想你可以有一个组件列表，其中每个组件都有自己的历史记录或其他任何内容，你可以在主组件中显示组件列表。然后，在 home 组件中，您可以打开所需的工具栏和工具栏组件。因此，您可以将该函数作为 prop 传递给每个元素列表组件，并将其绑定(bind)到 home 组件。

然后每个组件都有一个 onClick 事件，您可以将该 Prop 作为函数调用。

我有一个我为我的个人元素做的例子:让 activities = this.state.activities.map(function (activity) {

        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 事件，我在其中将 Prop onTouchTap 称为函数。