为什么这个荧光笔不总是有效？

时间：2016-08-17 02:42:25

标签： javascript css

为什么我的荧光笔如此错？首先，选择文本，然后选择其中一种颜色以使选择变为粗体。但是，有时候它并没有这样做，有时也会这样做。此外，我只希望该文本不是粗体而不是同一个短语的每个实例。例如，如果您突出显示 Hello ，则所有Hellos都将为粗体。我只希望选中的Hello加粗。 如何解决此问题？

＆＃13;
＆＃13; 
 $("#actual_verse").mouseup(function() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    
    if (/\S/.test(text)) {
      new_text = "<div id='color_div'>"+text+"</div>";
      
          $(".boxes").click(function() {
  var title = $(this).attr("title");
  var reg = new RegExp(text,"g");
   $('#actual_verse').html($('#actual_verse').html().replace(reg,'<strong>'+text+'</strong>'));
  document.getElementById('tooltip').style.display = 'none';
});
  
        
   // Tool Tip
  
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1= document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', function () {
    if (!sel.isCollapsed) {
        debugger;
        var r = sel.getRangeAt(0).getBoundingClientRect();
        var rb1 = rel1.getBoundingClientRect();
        var rb2 = rel2.getBoundingClientRect();
        ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
        ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this will align the right edges together

        //code to set content

        ele.style.display = 'block';
    }
});

  // End of Tool Tip
  
  }
  
    
  });
＆＃13; 
/* Tool Kit */

#tooltip {
    position:absolute;
    display:none;
    border:grey solid 1px;
    background: #373737;
    padding: 5px;
    border-radius: 3px;
}
#cal1{
    position:absolute;
    height:0px;
    width:0px;
    top:100px;
    left:100px;
    overflow:none;
    z-index:-100;
}
#cal2{
    position:absolute;
    height:0px;
    width:0px;
    top:0;
    left:0;
    overflow:none;
    z-index:-100;
}

.boxes {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  position: relative;
  top: 3px;
}

#blue_box {
  background: #AAF6FF;
}

#green_box {
  background: #D6FFAA;
}

#orange_box {
  background: #FFBF98;
}

#purple_box {
  background: #D7D5FC;
}

#red_box {
  background: #FF9B9F;
}

#yellow_box {
  background: #FFF8AA;
}


/* End of Tool Kit */
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse'> Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here </span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> <div id='blue_box' class='boxes' title='Blue'></div> <div id='green_box' class='boxes' title='Green'></div> <div id='orange_box' class='boxes' title='Orange'></div> <div id='purple_box' class='boxes' title='Purple'></div> <div id='red_box' class='boxes' title='Red'></div> </div> <br> <br>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

一个非常有趣的问题。尝试使用Rangy。 Download zip file from Git。在调用MyHighlight.toggleSelection（）之前，请注意自己搞乱Range和Selection（在调用它时，确保选择在浏览器中可见）。

这是简化版（对＆＃34;脚本＆＃34;标签进行了更改，同时＆＃34; *。突出显示＆＃34;添加了样式）。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="rangy-master/external/log4javascript.js"></script>
<script type="text/javascript" src="rangy-master/src/core/core.js"></script>
<script type="text/javascript" src="rangy-master/src/core/dom.js"></script>
<script type="text/javascript" src="rangy-master/src/core/domrange.js"></script>
<script type="text/javascript" src="rangy-master/src/core/wrappedrange.js"></script>
<script type="text/javascript" src="rangy-master/src/core/wrappedselection.js"></script>
<script type="text/javascript" src="rangy-master/src/modules/rangy-classapplier.js"></script>

<script type="text/javascript">

    var MyHighlight;

    rangy.addInitListener(function(rangy) {
        MyHighlight = rangy.createClassApplier("highlight", true);
    });

    $( document ).ready(function() {


            $(".boxes").mousedown(function() {
                    MyHighlight.toggleSelection();
                    document.getElementById('tooltip').style.display = 'none';

            });

            $("#actual_verse").mouseup(function() {


                        var ele = document.getElementById('tooltip');
                        ele.style.display = 'block';


      });



    });





</script>
<style>

        /* Tool Kit */

    #tooltip {
        position:absolute;
        display:none;
        border:grey solid 1px;
        background: #373737;
        padding: 5px;
        border-radius: 3px;
    }
    #cal1{
        position:absolute;
        height:0px;
        width:0px;
        top:100px;
        left:100px;
        overflow:none;
        z-index:-100;
    }
    #cal2{
        position:absolute;
        height:0px;
        width:0px;
        top:0;
        left:0;
        overflow:none;
        z-index:-100;
    }

    .boxes {
      width: 15px;
      height: 15px;
      cursor: pointer;
      display: inline-block;
      margin-right: 2px;
      position: relative;
      top: 3px;
    }

    #blue_box {
      background: #AAF6FF;
    }

    #green_box {
      background: #D6FFAA;
    }

    #orange_box {
      background: #FFBF98;
    }

    #purple_box {
      background: #D7D5FC;
    }

    #red_box {
      background: #FF9B9F;
    }

    #yellow_box {
      background: #FFF8AA;
    }

        /* Tool Kit */

    #tooltip {
        position:absolute;
        display:none;
        border:grey solid 1px;
        background: #373737;
        padding: 5px;
        border-radius: 3px;
    }
    #cal1{
        position:absolute;
        height:0px;
        width:0px;
        top:100px;
        left:100px;
        overflow:none;
        z-index:-100;
    }
    #cal2{
        position:absolute;
        height:0px;
        width:0px;
        top:0;
        left:0;
        overflow:none;
        z-index:-100;
    }

    .boxes {
      width: 15px;
      height: 15px;
      cursor: pointer;
      display: inline-block;
      margin-right: 2px;
      position: relative;
      top: 3px;
    }

    #blue_box {
      background: #AAF6FF;
    }

    #green_box {
      background: #D6FFAA;
    }

    #orange_box {
      background: #FFBF98;
    }

    #purple_box {
      background: #D7D5FC;
    }

    #red_box {
      background: #FF9B9F;
    }

    #yellow_box {
      background: #FFF8AA;
    }


    *.highlight {
        font-weight: bold;
        background-color:#ff0000;
    }


</style>
</head>
<body>
<span id='actual_verse'> Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here </span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> <div id='blue_box' class='boxes' title='Blue'></div> <div id='green_box' class='boxes' title='Green'></div> <div id='orange_box' class='boxes' title='Orange'></div> <div id='purple_box' class='boxes' title='Purple'></div> <div id='red_box' class='boxes' title='Red'></div> </div> <br> <br>
</body>
</html>
相关问题
最新问题