Fire an event before `cut` event in ace editor

Question

I want to fire an event before cut, so that I can get what text is being cut i.e. what has been already selected. I am currently using the following code, which doesn't seem to work as desired.

    $("#editor").bind({
    cut:function(){
        console.log('Cut Detected');            
       alert(editor.selection.getRange());

    }
});

editor is the id of the "div" tag which is editable. editor.selection.getRange() returns the start and end of selection. edit I am woring with content editable div and want to apply the functionality on it.

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Editor</title>
</head>
<body>

<div id='myTa' contenteditable>hello world where are you</div>
<script type='text/javascript' src='jquery-2.1.4.min.js'></script>
<script type='text/javascript'>
$("#myTa").on("cut", function(){
alert(this.selectionStart+ " to " + this.selectionEnd);
})
</script>


</body>
</html>

So should the title of this question be, "Fire an event before **cut**."? — Pointy, Jun 20 '15 at 11:32

score 0 · Answer 1 · edited May 23 '17 at 12:14

I think at first that clipboardEvent will have the clipped text, but it seems not, so I try to find the selection related properties of input and found it.

And the reference is HTMLInputElement.

This codes work in presumption that your $("#editor") is either an input or textarea.

$("#editor").bind({
    cut:function(e){
        console.log('Cut Detected');
        var $this = $(this);
        var selectStart = this.selectionStart;
        var selectionEnd = this.selectionEnd;
       var clippedValue = $this.val().slice(selectStart, selectionEnd);
       // Now you have the clipped value, do whatever you want with the
       // value.
       alert(clippedValue);
    }
});

For works on contentediable, you can do this, which I just found info from Return HTML from a user-selected text and MDN

$("#myTa").on("cut", function(e){
    // Seems diff bro
    var selections = window.getSelection();
    var currentSelection = selections.getRangeAt(0);
    var start = currentSelection.startOffset;
    var end  = currentSelection.endOffset;
    var selectedContents = currentSelection.toString();
    // Do whatever you want.
    console.log(start, end);
    console.log(selectedContents);
    alert(selectedContents);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='myTa' contenteditable>ask;ndjkasn asdbasj aujs d sdib askjbnsaab asbh mjn a</div>

I am trying to apply the above code on contenteditable div, the code doesn't seems to work on that. please suggest a work-around. my code: [link] http://freetexthost.com/kimbohwfwm — Rohit Katariya, Jun 21 '15 at 06:43
@RohitKatariya Hello? Did you notice that I've create a snippet to show how to do what is done in `input` for `contenteditable div`? — fuyushimoya, Jun 21 '15 at 17:28

score 0 · Answer 2 · answered Jun 20 '15 at 12:03

0

You are correct that you need to use the cut event. The ClipboardEvent API is apparently unstable but yes, I would have thought it would include the text being moved onto the clipboard.

The following works for me:

$("textarea").on("cut", function(){
    alert(this.value.substring(this.selectionStart, this.selectionEnd));
})

It's worth noting that bind is deprecated in jQuery, you should use on instead. Try out the snippet:

$("textarea").on("cut", function() {
      alert(this.value.substring(this.selectionStart, this.selectionEnd));
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

answered Jun 20 '15 at 12:03

jcuenod

55,835
14
65
102

I am trying to apply the above code on contenteditable div, the code doesn't seems to work on that. please suggest a work-around. my code: [link] freetexthost.com/kimbohwfwm – Rohit Katariya Jun 21 '15 at 06:45
In the code you linked to you have not copied the code above correctly: `alert(this.selectionStart+ " to " + this.selectionEnd);` will not work, you need to use `selectionStart` and `selectionEnd` to get a substring. Read over the above solution again. – jcuenod Jun 22 '15 at 07:19

Rohit Katariya · Answer 3 · 2015-06-21T09:36:09.290

0

I have got the solution to my answer. apperently there is an editor.on('cut',function(e)) in ace editor I use

editor.on("cut", function(e){
        console.log('Cut Detected');
        console.log(editor.selection.getRange());
    });

edited Jun 21 '15 at 09:36

answered Jun 21 '15 at 09:26

Rohit Katariya

1
7

Fire an event before `cut` event in ace editor

3 Answers3