javascript - 如何使选定的文本具有黄色

Question

如果他们选择文本并按 Ctrl + y，我希望所选文本具有黄色。

类似这样的东西:

在我当前的代码中，如果我选择文本并按ctrl + b，它将变为粗体

类似如果我选择文本并按ctrl + y它应该变成黄色

请参阅 codepen 示例，如下所示，此处不起作用:https://codepen.io/eabangalore/pen/LJeRmq ( fork 以进行编辑)

$(document).on( 'mouseup', '#texteditor',function(e){
  console.log(e);
  var text =    window.getSelection().toString();
});

#texteditor{
  border:1px solid rgba(0,0,8,0.1);
  letter-spacing:6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texteditor" contenteditable>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt at dignissimos nemo id excepturi deserunt eius animi est porro consequuntur cupiditate, totam, ullam voluptatem, nam recusandae facilis impedit tenetur nihil.
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus architecto, in iste debitis tenetur consequuntur possimus rem eaque doloremque soluta amet repudiandae unde nobis sunt voluptatem deleniti cupiditate quod quisquam!
</div>

Answer 1

我将事件更改为 keydown 并检查是否同时按下了 ctrl + y 键。然后我选择文本并将颜色更改为黄色。 document.designMode 控制整个文档是否可编辑，我将其设置为“on”。颜色更改完成后，我关闭了 designMode。

我根据您的代码创建了一个小 fiddle ，请看一下: https://jsfiddle.net/oat79yvs/2/

$(document).on('keydown', '#texteditor', function(e) {
  if (e.ctrlKey && e.which === 89) {

    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
      range = sel.getRangeAt(0);
    }
    // Set design mode to on
    document.designMode = "on";
    if (range) {
      sel.removeAllRanges();
      sel.addRange(range);
    }
    // Colorize text
    document.execCommand("ForeColor", false, "yellow");
    // Set design mode to off
    document.designMode = "off";
  }
});

#texteditor {
  border: 1px solid rgba(0, 0, 8, 0.1);
  letter-spacing: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texteditor" contenteditable>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt at dignissimos nemo id excepturi deserunt eius animi est porro consequuntur cupiditate, totam, ullam voluptatem, nam recusandae facilis impedit tenetur nihil. Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Doloribus architecto, in iste debitis tenetur consequuntur possimus rem eaque doloremque soluta amet repudiandae unde nobis sunt voluptatem deleniti cupiditate quod quisquam!
</div>