CODEWITHSUNDEEP
javascriptjquerycss
EaBengaluru
EaBengaluru

Reputation: 81

how to make selected text to have yellow color

I wanted to have selected text to have yellow color, if they select a text and press Ctrl + y.

something like this:

in my current code if I select text and press ctrl + b it will become bold

similarly if I select text and press ctrl + y it should become yellow

Please see codepen example as below one is not working here:https://codepen.io/eabangalore/pen/LJeRmq (fork it for editing)

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

Upvotes: 2

Views: 429

Answers (3)

Jan Andersen
Jan Andersen

Reputation: 773

You need to encapsulate the highlighted text in a block of some sort and when you highlight text you need to make a reference to the range. 

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

You also need to avoid that the letter "Y" overwrites the highlighted text hence the additions of preventDefault and stopPropagation. Unfortunately that doesn't catch sticky keys or falling asleep on the keyboard, so that's what lastKey is doing, checking if it's the same as the last bubble, which is reset at the next highlight of text. 

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

Upvotes: 1

Amardeep Bhowmick
Amardeep Bhowmick

Reputation: 16908

I changed the event to keydown and checked if both ctrl + y key is pressed. Then I selected the text and changed the color to yellow. The document.designMode controls whether the entire document is editable, I have set it to "on". When the color change is completed I have turned off the designMode.

I have created a small fiddle from your code, please take a look: 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>

Upvotes: 2

Vishnu Singh
Vishnu Singh

Reputation: 461

You can create a css class:


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

Now you can toggle this class by following jquery code:

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

Upvotes: 0

Related Questions