How can I keep text highlighting after pasting?

Question

I have a small markdown editor

Demo

HTML:

<textarea id="txtarea">this is a **test**</textarea>
<button data-marker="**">Bold (toggle)</button>
<button data-marker="~~">Strike through (toggle)</button>
<button data-marker="*">Italics (toggle)</button>

JS:

function toggleMarker(marker, el) {
    var markerLength = marker.length;
    var startPos, endPos, selection, range;

    if (document.selection != undefined) { // IE
        el.focus();
        range = document.selection.createRange();
        selection = range.text;
    } else if (el.selectionStart != undefined) { // Firefox
        startPos = el.selectionStart;
        endPos   = el.selectionEnd;
        selection = el.value.substring(startPos, endPos);
    }
    
    if (!selection.length){
            return;
    }
    
    
    
    if (el.value.substring(startPos-markerLength,startPos) === marker
            && el.value.substring(endPos,endPos+markerLength) === marker
    ){
            el.value = el.value.substring(0,startPos-markerLength) +
                                selection + 
                  el.value.substring(endPos+markerLength);
    }
    else{
            el.value = el.value.substring(0,startPos) + marker + 
                                selection + marker + el.value.substring(endPos);
    }
    
}

$(document).on('mousedown', 'button', function(e) {
  toggleMarker( $(this).data('marker'), $('#txtarea').get(0) ).text;
});

Now I need to keep the highlighting of pasted text. How can I do that?

See http://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse — Thomas, Jan 18 '16 at 17:08
@Thomas Thank you. But I saw that before asking, and I really cannot use it for my case. — stack, Jan 18 '16 at 17:11
If you already saw something similar beforehand, you should mention that upfront. And even now that you have done that, you still fail to mention why you “cannot use it.” — CBroe, Jan 19 '16 at 10:20

medinasod · Answer 1 · 2016-01-19T07:30:38.980

http://codepen.io/medinasod/pen/GoOrwq

JS:

var markerLength,
    startPos,
    endPos,
    selection,
    range;

function selectText(startPos, endPos, markerLength, marker) {
    mytxtarea = document.getElementById("txtarea");

          window.setTimeout(function() {       
          if  (mytxtarea.value.substring(startPos-markerLength,startPos) === marker && mytxtarea.value.substring(endPos,endPos+markerLength) === marker) {
              mytxtarea.setSelectionRange(startPos+markerLength, endPos+markerLength);
            } else {
              mytxtarea.setSelectionRange(startPos+markerLength, endPos+markerLength);
            }
        }, 0);

}

function toggleMarker(marker, el) {
markerLength = marker.length;
    if (document.selection != undefined) { // IE
        el.focus();
        range = document.selection.createRange();
        selection = range.text;
    } else if (el.selectionStart != undefined) { // Firefox
        startPos = el.selectionStart;
        endPos   = el.selectionEnd;
        selection = el.value.substring(startPos, endPos);
    }

    if (!selection.length){
            return;
    }



    if (el.value.substring(startPos-markerLength,startPos) === marker
            && el.value.substring(endPos,endPos+markerLength) === marker
    ){
            el.value = el.value.substring(0,startPos-markerLength) +
                                selection + 
                  el.value.substring(endPos+markerLength);
    }
    else{
            el.value = el.value.substring(0,startPos) + marker + 
                                selection + marker + el.value.substring(endPos);
    }
  selectText(startPos, endPos, markerLength, marker);    
}

$(document).on('mousedown', 'button', function(e) {
  toggleMarker( $(this).data('marker'), document.getElementById('txtarea'));
});

HTML:

<textarea id="txtarea">this is a test</textarea>
<button data-marker="**">Bold (toggle)</button>
<button data-marker="~~">Strike through (toggle)</button>
<button data-marker="*">Italics (toggle)</button>

My answer is a bit rough, but I believe it solves the specific question you asked. I would welcome any input on how to improve it. — medinasod, Jan 19 '16 at 07:45

How can I keep text highlighting after pasting?

Demo

1 Answers1