Question

$('#btnedit').click(function(){
$('#story').prop('contentEditable', true).focus();
});

$('#btnsave').click(function(){
$('#story').prop('contentEditable', false).blur();
});

.story{
white-space:pre-wrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btnedit'>EDIT</button>
<button id='btnsave'>SAVE</button>

<div class='story' id='story'>
lorem ipsum
https://www.youtube.com/
lorem ipsum
https://www.google.com/
</div>

点击btnsave后如何使该链接可点击？

如果可能，可以使用target='_blank'。

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Answer 1

您可以从元素中提取文字，然后附加该文字。

请不要那样，要创建链接，您必须使用锚链接编辑内容，如下所示：

<a href="https://www.youtube.com/" target="blank">Youtube</a>

$('#btnedit').click(function(){
  $('#story').prop('contentEditable', true).focus();
});

$('#btnsave').click(function(){
  $('#story').prop('contentEditable', false).blur();
  var html = $('#story').text();
  var htmlArr = html.split('\n');
  $('#story').html('');
  htmlArr.forEach(function(el){
    if(el.includes('https://')){
      el = '<a href='+el+' target=blank>'+el.split('.')[1]+'</a>'
      $('#story').append(el+'\n');
    }
    else
      $('#story').append(el+'\n');
  })
  
});

.story{
  white-space:pre-wrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btnedit'>EDIT</button>
<button id='btnsave'>SAVE</button>

<div class='story' id='story'>
lorem ipsum
https://www.youtube.com/
lorem ipsum
https://www.google.com/
</div>

Answer 2

如果我们每次都在链接之前始终添加一个解释，则可以在#story中拆分html并链接第二个文本，并且可以禁用最后单击的按钮以避免任何错误。

// 编辑：现在可用于所有随机放置的链接

var story = $("#story").html();

$('#btnedit').click(function(){
$('#story').prop('contentEditable', true).focus();
$('#story').html(story)

$("#btnsave").css("pointer-events", "all");
$(this).css("pointer-events", "none");
});

$('#btnsave').click(function(){
   $(this).css("pointer-events", "none");
   $("#btnedit").css("pointer-events", "all");
   
   $('#story').prop('contentEditable', false).blur();
   var newContent = "";
   story = $("#story").html();

   var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
   newContent = story.replace(exp,"<a href=\"$1\">$1</a>"); 

   $("#story").html(newContent);
});

.story{
white-space:pre-wrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btnedit'>EDIT</button>
<button id='btnsave'>SAVE</button>

<div class='story' id='story'>
lorem ipsum
https://www.youtube.com/
lorem ipsum
https://www.google.com/
</div>

还没有测试过，但是应该可以工作

Answer 3

点击“保存”按钮后，解析#story div上的html内容，并用相应的锚标记替换每次出现的“ https://..../”。

function convertUrlsToAnchorTags(text) {
    return text.replace(/((https|http|ftp)?:\/\/[^\s]+)/g, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    });
}

$('#btnsave').click(function(){
    text = $('#story').html();
    $('#story')
        .html(convertUrlsToAnchorTags(text))
        .prop('contentEditable', false).blur();
});
$('#btnedit').click(function(){
    $('#story')
        .html($('#story').text().replace(/<a(?:.|\n)*?>/gm, ''));
    $('#story').prop('contentEditable', true).focus();
});

Answer 4

使用以下javascript代码：

AggressiveInlining

$('#btnedit').click(function(){
    $('#story').prop('contentEditable', true).focus();
});

$('#btnsave').click(function(){
    var story = $('#story');
    story.prop('contentEditable', false).blur();
    var text = story.text();
    text = urlify(text);
    story.html(text);
});

function urlify(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, '<a href="$1" target="_blank">$1</a>')
}

$('#btnedit').click(function(){
	$('#story').prop('contentEditable', true).focus();
});

$('#btnsave').click(function(){
	var story = $('#story');
	story.prop('contentEditable', false).blur();
	var text = story.text();
	text = urlify(text);
	story.html(text);
});

function urlify(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, '<a href="$1" target="_blank">$1</a>')
}

.story{
white-space:pre-wrap;
}

更改contentEditable div后如何制作可点击链接？

4 个答案: