从选择中获得可点击的 link

Question

$('button').on('click', function(){
    let selection = document.getSelection().toString().trim();
  document.execCommand('createLink', true, selection);
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = 'parent' contentEditable = 'true'>
Lorem ipsum dolor sit amet google.com
</div>
<br>
<button>CLICK</button>

因此请从 google.com 中进行选择，然后单击按钮。

google.com 变成蓝色，因为它是 link，但点击它 - 不起作用。

如果可能，如何从目标 = _blank 和光标 = pointer 从 google.com 获得真正的可点击 link？

Answer 1

包裹在具有 contentEditable='true' 的元素中的链接将不起作用，因为它们基本上位于 "text editor".

中

也许您应该尝试更改单击时的 contentEditable 属性，以便在文本未获得焦点/单击时将其设置为 false。

Answer 2

https://jsfiddle.net/rfy5hz8q/13/

工作fiddle:

(function($){
    $('button').on('click', function(){
       let selection = document.getSelection().toString().trim();
       document.execCommand('insertHTML', false, '<a contentEditable="false" 
       href="' + selection + '" target="_blank">' + selection + '</a>');    
    })

})($)

Answer 3

内容可编辑与您在任何编辑器中的工作一样，获取 Whosebug 编辑器的示例，一种方法是同时拥有编辑器和预览，类似这样。

$('button').on('click', function(){
    let selection = document.getSelection().toString().trim();
  document.execCommand('createLink', true, selection);    
})
$("#preview").on('click', function(){
 var value = $('.parent').attr('contenteditable');

    if (value == 'false') {
        $('.parent').attr('contenteditable','true');
        $('#preview').text("Preview")
    }
    else {
        $('#preview').text("Edit")
        $('.parent').attr('contenteditable','false');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = 'parent' contentEditable='true'>
Lorem ipsum dolor sit amet google.com
</div>


<br>
<button>CLICK</button><button id="preview">Preview</button>

从选择中获得可点击的 link

get a clickable link from a selection

javascript

jquery

execcommand