检查所选文本是否为 link

Question

我有一个 contenteditable div，用户可以在其中输入文本 select，然后向其中添加 link（通过单击按钮）。然后他们可以通过将鼠标悬停在文本上并单击另一个按钮来删除 link。

目前，显示两个按钮（link 和 unlink）。是否可以隐藏 unlink 按钮，当用户 select 在 div 中输入一些文本时，它会检查文本是否有 link:

如果是这样，link 按钮将隐藏，unlink 按钮将出现。然后他们可以单击 unlink 按钮删除 link

否则，link 按钮将保持原样。

<button type="button" class="center" id="link">Link</button>
<button type="button" class="center" id="unlink">Unlink</button>
<div style="border: 1px solid;" contenteditable>

<script>
$('#link').click(function() {
var linkURL = prompt("Enter the URL for this link:", "http://");
document.execCommand("CreateLink", false, linkURL);
updateInput()
});

$('#unlink').click(function() {
document.execCommand("UnLink", false, null);
updateInput()
});
</script>

JsFiddle: https://jsfiddle.net/yw66s03e/

Answer 1

您可以在 div 上使用 selectstart 事件侦听器以及 mouseup 事件。

代码：

$("#unlink").fadeOut();
$('#link').click(function() {
  var linkURL = prompt("Enter the URL for this link:", "http://");
  document.execCommand("CreateLink", false, linkURL);
  $("#unlink").fadeIn();
  $("#link").fadeOut();
//   updateInput();
});

$('#unlink').click(function() {
  document.execCommand("UnLink", false, null);
  $("#unlink").fadeOut();
  $("#link").fadeIn();
//   updateInput();
});

$('div').on('selectstart', function () {
  
  $("#unlink").fadeOut();
  $("#link").fadeIn();
        $(document).one('mouseup', function() {
          var itemLink = itemIsLinked();
            if(typeof itemLink === "object" && itemLink[0] === true){
              $("#unlink").fadeIn();
              $("#link").fadeOut();
            }        
        });
});

$("body").on("keyup","div",function(e){
  if($("#unlink").css("display") != "none"){
    $("#unlink").fadeOut();
    $("#link").fadeIn();
  }
});

function itemIsLinked(){
    if(window.getSelection().toString() != ""){
        var selection = window.getSelection().getRangeAt(0);
        if(selection){
            if (selection.startContainer.parentNode.tagName === 'A' || selection.endContainer.parentNode.tagName === 'A') {
                return [true, selection];
            } else { return false; }
        } else { return false; }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button type="button" class="center" id="link">Link</button>
<button type="button" class="center" id="unlink">Unlink</button>

<div style="border: 1px solid;" contenteditable>

检查所选文本是否为 link

Checking if selected text is a link or not

html

anchor

jquery

contenteditable