¿Cómo puedo mostrar el formato HTML dentro de un área de texto?

Question

Tengo un código que le permite formatear el texto en un área de texto con negrita, subrayado, tachado o cursiva. Pero muestra las etiquetas html en lugar de formatearlas realmente. Sé que una vez que lo publique dentro de un div, estará formateado, pero quiero mostrar el formato mientras el usuario escribe el texto.

¿Cómo puedo habilitar el formateo? JavaScript está bien, estoy usando JQuery en este momento. También preferiría no usar un editor WYSIWYG, si hay otra opción.

Gracias por cualquier ayuda.

Answer 1

Creo que solo es posible mediante el uso de algún div u otro elemento html con estilo en lugar de su área de texto. Con Javascript, entonces agregarías la funcionalidad del área de texto.

¿Qué tal si usas algún sistema de formato como este aquí en SO? Es mucho más elegante en mi opinión, que pseudo WYSIWYG.

Answer 2

Reemplace el área de texto con un div y habilite el modo de diseño. O puede usar el plugin jquery http://plugins.jquery.com/project/designMode

Answer 3

No se puede hacer dentro de un Textarea, tendrá que ir haciendo un editor wysiwyg o algo así. Es bastante fácil hacer uno de esos tú mismo. Este es un muy buen tutorial:

Devgurus wysiwyg tutorial

Answer 4

atributo Uso contentEditable el elemento div

<div contentEditable="true"> 
</div 

esta manera se puede dar formato a su entrada en cualquier forma deseada, simplemente no se olvide adecuadamente escapar de datos.

Answer 5

Solo un pensamiento; si solo quieres que los usuarios vean cómo será su respuesta, puedes seguir el ejemplo desde este sitio y tener una especie de div "de vista previa" justo encima/debajo del cuadro de comentarios. Podría usar onKeyUp para poner el código en el div para mantenerlo actualizado mientras el usuario escribe. No es perfecto, pero probablemente sea tan bueno como lo que obtendrás si no quieres usar un WYSIWYG.

Dicho esto, la opción contentEditable + WYSIWYG es probablemente más fácil de usar, y más simple, en mi humilde opinión.