rendering HTML all'interno textarea

Question

ho bisogno di essere in grado di rendere alcuni tag HTML all'interno di una textarea (vale a dire <forte>, <i>, <u>, <un>), ma textareas solo interpretare il loro contenuto come testo. C'è un modo semplice per farlo senza fare affidamento su librerie/plugin esterni (sto usando jQuery)? Se no, conosci qualche plugin jQuery che potrei usare per fare questo?

Answer 1

Questo non è possibile fare con un textarea. Quello che state cercando è un content editable div, che è molto presto fatto:

<div contenteditable="true"></div> 

jsFiddle

div.editable { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
} 
 

 
strong { 
 
    font-weight: bold; 
 
}

<div contenteditable="true">This is the first line.<br> 
 
See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the end? 
 
<br>It works nicely. 
 
<br> 
 
<br><span style="color: lightgreen">Great</span>. 
 
</div>

Answer 2

Con un div modificabile è possibile utilizzare il metodo document.execCommand (more details) per fornire facilmente il supporto per i tag specificati e per alcune altre funzionalità.

#text { 
 
    width : 500px; 
 
\t min-height : 100px; 
 
\t border : 2px solid; 
 
}

<div id="text" contenteditable="true"></div> 
 
<button onclick="document.execCommand('bold');">toggle bold</button> 
 
<button onclick="document.execCommand('italic');">toggle italic</button> 
 
<button onclick="document.execCommand('underline');">toggle underline</button>

Answer 3

Ho lo stesso problema, ma in senso inverso, e la seguente soluzione. Voglio mettere html da un div in una textarea (in modo da poter modificare alcune reazioni sul mio sito, voglio avere la textarea nella stessa posizione.)

<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div> 

di mettere il contenuto di questo div in un textarea Uso:

var content = $('#msg500').text(); 
$('#msg500').wrapInner('<textarea>'+content+'</textarea>'); 

Answer 4

Un addendum a questo. È possibile utilizzare le entità carattere (come la modifica di in <div>) e la renderizzazione nella textarea. Ma quando viene salvato, il valore della textarea è il testo come reso. Quindi non è necessario decodificare. Ho appena provato questo attraverso i browser (cioè indietro a 11).

Answer 5

provare questo esempio su JSFiddle

<style> 
.editable { 
    width: 300px; 
    height: 200px; 
    border: 1px solid #ccc; 
    padding: 5px; 
    resize: both; 
    overflow: auto; 
} 
</style> 

<div class="editable" contenteditable="true"></div> 
<button class="bold">toggle red</button> 
<button class="italic">toggle italic</button> 

<script> 
function toggleRed() { 
    var text = $('.editable').text(); 
    $('.editable').html('<p style="color:red">'+text+'</p>'); 
} 

function toggleItalic() { 
    var text = $('.editable').text(); 
    $('.editable').html("<i>"+text+"</i>"); 
} 

$('.bold').click(function() { 
    toggleRed(); 
}); 

$('.italic').click(function() { 
    toggleItalic(); 
}); 
</script> 

Edit by Jeffrey Crowder - Web Developer programmatore/Windows

ho aggiunto un violino JS del codice.

Answer 6

questo è possibile con <textarea> l'unica cosa che dovete fare è usare Summernote WYSIWYG editor

interpreta i tag HTML all'interno di una textarea (vale a dire <strong>, <i>, <u>, <a>)