CODEWITHSUNDEEP
javascripthtml
user7461846
user7461846

Reputation:

how to make clickable links after changing a contentEditable div?

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

How to make this links clickable after click on btnsave?

If possible with target='_blank'.

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

Upvotes: 0

Views: 1499

Answers (4)

gurpreet singh chahal
gurpreet singh chahal

Reputation: 370

Upon clicking on save button, parse the html contents on #story div and replace each occurrence of 'https://..../' with respective anchor tags.

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();
});

Upvotes: 0

agtabesh
agtabesh

Reputation: 568

Use this javascript code:

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

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You can take the text from the element then append that text.

Please not that, to create a link you have to edit the content with an anchor link, something like the following:

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

Upvotes: 0

ArdaTahsinAyar
ArdaTahsinAyar

Reputation: 96

If we assume an explanation always comes before a link every time, you can split the html in the #story and link the every second text, and you can disable the last clicked button to avoid any bugs.

// Edit : now works with all randomly placed links

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>

Haven't tested tho, but it should work

Upvotes: 3

Related Questions