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

¿Cómo hacer que se pueda hacer clic en estos enlaces después de hacer clic en btnsave?

Si es posible con target='_blank'.

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

0
user7461846 9 sep. 2018 a las 11:17

4 respuestas

La mejor respuesta

Si asumimos que siempre hay una explicación antes de un enlace, puede dividir el html en la # historia y vincular el segundo texto, y puede deshabilitar el último botón para evitar errores.

// Editar : ahora funciona con todos los enlaces colocados al azar

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>

No lo he probado, pero debería funcionar

2
ArdaTahsinAyar 9 sep. 2018 a las 08:56

Puede tomar el texto del elemento y luego agregar ese texto.

Por favor, no eso, para crear un enlace tienes que editar el contenido con un enlace de anclaje, algo como lo siguiente:

<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>
0
Mamun 9 sep. 2018 a las 09:00

Use este código javascript:

$('#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>
0
agtabesh 9 sep. 2018 a las 09:05

Al hacer clic en el botón Guardar, analice el contenido html en #story div y reemplace cada aparición de 'https: // .... / 'con las respectivas etiquetas de anclaje.

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();
});
0
gurpreet singh chahal 9 sep. 2018 a las 09:33