Question

如果他们选择文本并按Ctrl + y，我想选择黄色文本。

类似的东西：

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

类似地，如果我选择text并按ctrl + y，它应该会变成黄色

请参见下面的codepen示例，一个在这里不起作用：https://codepen.io/eabangalore/pen/LJeRmq （将其分叉进行编辑）

$(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。

我已经从您的代码中创建了一个小提琴，请看一下： 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>

Answer 2

您需要将突出显示的文本封装在某种形式的块中，突出显示文本时需要引用该范围。

var range = null;
var lastKey = 0;
$(document).on( 'mouseup', '#texteditor',function(e){
  console.log(e);
  lastKey = 0;
  range = window.getSelection().getRangeAt(0);
});

您还需要避免字母“ Y”覆盖突出显示的文本，因此要添加preventDefault和stopPropagation。不幸的是，这并没有捕获到粘滞键或键盘上无法入睡，所以这就是lastKey所做的，检查它是否与上一个气泡相同，该气泡在下一个高亮文本处重置。

$('#texteditor').on( "keydown", function( event ) {
  if (event.ctrlKey && event.which == 89) {
    if (lastKey == 89)
      return false;
    lastKey = 89;
    var rangeContent = range.extractContents();
    var element = document.createElement("span");
    element.style.color = "yellow";
    element.appendChild(rangeContent);
    range.insertNode(element);
    event.preventDefault();
    event.stopPropagation();
  }
});

https://codepen.io/anon/pen/WgdGqO

Answer 3

您可以创建一个CSS类：


    .texteditor-yellow::selection {
        background: blue;
        color: yellow;
    }

现在，您可以按照以下jquery代码切换此类：

$("#texteditor").toggleClass("texteditor-yellow");

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

3 个答案: