javascript - 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 中使用 HTML button

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

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

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