Question

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

目前，两个按钮（链接和取消链接）都会显示。是否可以隐藏取消链接按钮，当用户在div中选择一些文本时，它会检查文本是否有链接：

如果是这样，链接按钮将隐藏，并显示取消链接按钮。然后，他们可以单击取消链接按钮以删除链接

如果没有，链接按钮将保持原样。

<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

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

代码：

＆＃13;

$("#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; }
    }
}

＆＃13;

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

＆＃13;

检查所选文本是否为链接

1 个答案: