¿Dar formato al texto en un <textarea>?

Question

Textareas son geniales debido a algunas funciones incorporadas (barras de desplazamiento). ¿Cómo puedo formatear <spans> de texto dentro del <textarea>?

Answer 1

Si necesita personalizar su área de texto, reproduzca su comportamiento utilizando otro elemento (como un DIV) con el atributo contenteditable.

Es más personalizable, y un enfoque más moderno, textarea es solo para contenido de texto sin formato, no para contenido enriquecido.

<div id='fake_textarea' contenteditable></div> 

Las barras de desplazamiento se pueden reproducir con la propiedad de desbordamiento de CSS.

Se puede utilizar esta área de texto falso en una forma normalmente, es decir: si usted tiene que presentar su contenido a través del método POST, usted podría hacer algo así (con jQuery):

<input type='hidden' id='fake_textarea_content' name='foobar' /> 

...

$('#your_form').submit(function() 
{ 
    $('#fake_textarea_content').val($('#fake_textarea').html()); 
}); 

Answer 2

No puede usar HTML dentro de TEXTAREA.

Desplazamiento se puede aplicar a cualquier elemento mediante la adición de overflow: auto y width fijo y height.

Answer 3

Puede utilizar editores html para web como CKEditor para poder formatear los datos en el área de texto. Verifique esto http://ckeditor.com/

Answer 4

No puede aplicar estilo al contenido de un área de texto por separado, tiene que usar s, o algo similar.

¿Quieres algo como esto?

http://jsfiddle.net/mekwall/XNkDx/

$('.editable').each(function(){ 
    this.contentEditable = true; 
}); 

Esto le permite editar el contenido de un div, y todavía se verá como un área de texto,

Negrita ahora funcionará.

Answer 5

Otra forma de presentar el área de texto "falso" está incluyendo las siguientes líneas dentro de la etiqueta form

<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());"> 
</form>