Toggle方法移除文本突出显示，这最终阻止execCommand更改突出显示的文本颜色

Question

你好，所以我注意到了我的切换方法

在显示颜色选择器之前，删除选定字符的文本高亮显示。这会阻止我为突出显示的字符添加颜色。这就是我的意思

​

​

另外，这个切换方法允许用户单击颜色选择器之外的任何位置，这也会退出颜色选择器，所以我想保持不变。

这是我想要的效果，但我的代码是这样的。它不能这样做。

​

​

那么我如何才能获得这样的效果呢？而不会失去切换和点击颜色选择器之外的任何地方以退出颜色选择器的能力。

这是我的代码

​

 document.addEventListener('DOMContentLoaded', function() {

      /*<Add color>*/

    //Toggle the color picker

      var colorPicker = document.querySelector('#color-picker');
      colorPicker.addEventListener('click', function(execute) {
        execute.stopPropagation();
      });

      document.addEventListener('click', toggleTheColorPicker);

      function toggleTheColorPicker(event) {
        
        var colorPickerVar = document.querySelector('#color-picker');
        if (colorPickerVar.style.display === 'block') {
          colorPickerVar.style.display = 'none';
        } 
        
        else if (event.target.id == 'font-color') {
    	  document.querySelector('.document').focus();
          colorPickerVar.style.display = 'block';
        }
      }

    /**/

    //Pick a color

    var all_colors= document.querySelectorAll('#color-picker .colors');

    for(var i=0; i < all_colors.length; i++){
    all_colors[i].addEventListener('mousedown',function(event){event.preventDefault();});
    all_colors[i].addEventListener('click',fontColor);
    } 

    function fontColor(event){
      var color= event.currentTarget.getAttribute('id');
      document.execCommand('foreColor', false, color);
      
      document.querySelector('#color-picker').style.display= 'none';
      
    }

    /**/

    //Cancel the color picker 
    document.querySelector('#color-picker #cancel').addEventListener('click',cancelColorPicker);

    function cancelColorPicker(){
    document.querySelector('#color-picker').style.display= 'none';
    }
    /**/

    /*</Add color>*/

    });

   /*-------------------------------------------------------------------------------------------------------------------------------------------------------
    Color picker
    --------------------------------------------------------------------------------------------------------------------------------------------------------*/

    #font-color{
      background-color: gray;
      color: gold;
      display: inline-block;
      padding: 5px;
      border-radius: 8px;
      cursor: pointer;
      
    }

    #color-picker{
      background-color: gray;
      height: 230px;
      width: 150px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      display: none;
    }

    #color-picker #internal-container{
    /*   background-color: black; */
      overflow: auto;
      width: 120px;
      margin-top: 15px;
      margin-left: auto;
      margin-right: auto;
    }

    #color-picker .color-container{
      position: relative;
    /*   background-color: blue; */
      height: 40px;
      width: 40px;
    /*   border: 1px solid black; */
      float: left;
    }

    #color-picker .colors{
      border-radius: 100%;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      height: 25px;
      width: 25px;
      display: block;
      cursor: pointer;
    }

    #color-picker #cancel{
    /*   background-color: red; */
      color: gold;
      position: absolute;
      left: 50%;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      cursor: pointer;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
    }  

    /*-------------------------------------------------------------------------------------------------------------------------------------------------------
    document
    --------------------------------------------------------------------------------------------------------------------------------------------------------*/

    .document{
        width:70vw;
        height: 50vh;
        margin: 2rem;
        padding: 1rem;
        font-size: 1.2rem;
        box-shadow: 0 .1rem .4rem gray;
        border: 1px solid gray;
        overflow-y: auto;
    }


    .document:focus {
        outline: none !important;
       box-shadow: 0 .1rem .4rem silver;
        border: 1px solid white;
    }

   <div id='font-color'>Font color</div>

    <!-------------------------------------------------------------------------------------------------------------------------------------------------------
    Color picker
    -------------------------------------------------------------------------------------------------------------------------------------------------------->

    <div id='color-picker'>
       
      <div id='internal-container'>
      
      <div class='color-container'>  
      <div id='white' class='colors' style='background-color: white;'></div>
      </div><!--</color-container>-->
      
      <div class='color-container'>   
      <div id='beige' class='colors' style='background-color: beige;'></div>
      </div><!--</color-container>-->
      
      <div class='color-container'>   
      <div id='yellow' class='colors' style='background-color: yellow;'></div>
      </div><!--</color-container>-->
      
      <div class='color-container'>
      <div id='gold' class='colors' style='background-color: gold;'></div>
      </div><!--</color-container>-->

      <div class='color-container'>
      <div id='orange' class='colors' style='background-color: orange;'></div>
     </div><!--</color-container>-->
        
      <div class='color-container'>
      <div id='pink' class='colors' style='background-color: pink;'></div>
      </div><!--</color-container>-->
      
      <div class='color-container'>
      <div id='violet' class='colors' style='background-color: violet;'></div>
      </div><!--</color-container>-->

      <div class='color-container'>  
      <div id='red' class='colors' style='background-color: red;'></div>
      </div><!--</color-container>-->
      
      <div class='color-container'>  
      <div id='dodgerblue' class='colors' style='background-color: dodgerblue;'></div>
      </div><!--</color-container>-->
        
      <div class='color-container'>  
      <div id='lime' class='colors' style='background-color: lime;'></div>  
      </div><!--</color-container>-->
        
      </div><!--<internal-container>-->
      
      <p id='cancel'>Cancel</p>
      
    </div><!--</color-picker>--> 


    <!-------------------------------------------------------------------------------------------------------------------------------------------------------
    Document
    -------------------------------------------------------------------------------------------------------------------------------------------------------->

    <div class='document' contenteditable='true'></div><!--</editor>-->

​

Answer 1

如果我理解得很好，你只需要在你的‘字体颜色’div中使用一个超文本标记语言button

<button id='font-color'>Font color</button>

这是您的示例(在Chromium中测试)：https://jsfiddle.net/3abnh4uj/1/

希望这对您有所帮助，或者至少为您指明正确的方向:)