在 ace 编辑器中的 `cut` 事件之前触发一个事件答案

【问题标题】：Fire an event before `cut` event in ace editor在 ace 编辑器中的 `cut` 事件之前触发一个事件
【发布时间】：2015-06-20 11:29:37
【问题描述】：

我想在剪切之前触发一个事件，以便我可以获取正在剪切的文本，即已经选择的文本。我目前正在使用以下代码，它似乎无法按预期工作。

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

    }
});

editor 是可编辑的“div”标签的id。 editor.selection.getRange() 返回选择的开始和结束。 edit 我正在使用内容可编辑的 div，并希望在其上应用该功能。

 <!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>

【问题讨论】：

那么这个问题的标题应该是“在 cut 之前触发一个事件。”吗？
你在使用 tinymce 编辑器吗？
我正在使用 ace 编辑器。

标签： javascript jquery ace-editor

【解决方案1】：

您是正确的，您需要使用cut 事件。 ClipboardEvent API 显然不稳定，但是是的，我原以为它会包含移动到剪贴板上的文本。

以下对我有用：

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

值得注意的是，bind 在 jQuery 中已被弃用，您应该改用 on。试试sn-p：

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

【讨论】：

我正在尝试在 contenteditable div 上应用上述代码，但该代码似乎不起作用。请提出解决方法。我的代码：[链接] freetexthost.com/kimbohwfwm
在您链接的代码中，您没有正确复制上面的代码：alert(this.selectionStart+ " to " + this.selectionEnd); 将不起作用，您需要使用selectionStart 和selectionEnd 来获取子字符串。再次阅读上述解决方案。

【解决方案2】：

我一开始以为clipboardEvent会有被剪掉的文字，但好像没有，于是我试着找input的选择相关属性，找到了。

参考是HTMLInputElement。

此代码假定您的$("#editor") 是input 或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);
    }
});

对于可满足的作品，你可以这样做，我刚刚从Return HTML from a user-selected text和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>

【讨论】：

我正在尝试在 contenteditable div 上应用上述代码，但该代码似乎不起作用。请提出解决方法。我的代码：[链接]freetexthost.com/kimbohwfwm
@RohitKatariya 你好？您是否注意到我创建了一个 sn-p 来展示如何在 input 中为 contenteditable div 完成的操作？

【解决方案3】：

我已经找到了答案。显然我使用的 ace 编辑器中有一个 editor.on('cut',function(e))

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

【讨论】：