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变成蓝色，因为它是一个链接，但单击它-不起作用。

如果可能的话，如何从google.com获得目标= _blank，光标= pointer的真实可点击链接？

Answer 1

包装在具有contentEditable='true'的元素中的链接将不起作用，因为它们基本上位于“文本编辑器”中。

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

Answer 2

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

工作小提琴：

(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

内容可编辑的功能与您在任何编辑器中使用的功能相同，以stackoverflow编辑器为例，一种方法是同时具有编辑器和预览功能。

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

从选择中获得可点击的链接

3 个答案: