Quería que el texto seleccionado tuviera color amarillo, si seleccionan un texto y presionan Ctrl + y.

algo como esto:

En mi código actual si selecciono text y presiono ctrl + b se convertirá en negrita

de manera similar si selecciono text y presiono ctrl + y, debería volverse amarillo

Consulte el ejemplo de codepen, ya que a continuación uno no funciona aquí: https://codepen.io/eabangalore / pen / LJeRmq (bifurca para editar)

$(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>
2
EaBengaluru 9 sep. 2018 a las 10:11

3 respuestas

La mejor respuesta

Cambié el evento a keydown y verifiqué si ambas teclas ctrl + y están presionadas. Luego seleccioné el texto y cambié el color a amarillo. El document.designMode controla si todo el documento es editable, lo configuré en "on". Cuando se completa el cambio de color, apagué el designMode.

He creado un pequeño violín a partir de su código, eche un vistazo: 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>
2
Fullstack Guy 9 sep. 2018 a las 07:53

Debe encapsular el texto resaltado en un bloque de algún tipo y cuando resalta el texto debe hacer una referencia al rango.

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

También debe evitar que la letra "Y" sobrescriba el texto resaltado, de ahí las adiciones de preventDefault y stopPropagation. Desafortunadamente, eso no atrapa teclas pegajosas ni se queda dormido en el teclado, así que eso es lo que lastKey está haciendo, verificando si es lo mismo que la última burbuja, que se restablece en el siguiente resaltado del texto.

$('#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

1
Jan Andersen 9 sep. 2018 a las 09:01

Puedes crear una clase css:


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

Ahora puede alternar esta clase siguiendo el código jquery:

$("#texteditor").toggleClass("texteditor-yellow");
0
Vishnu Singh 9 sep. 2018 a las 07:40