representación HTML dentro de área de texto

Question

tengo que ser capaz de hacer que algunas etiquetas HTML dentro de un área de texto (es decir, <fuerte>, <i>, <u>, <un>), pero las áreas de texto sólo interpretar su contenido como texto. ¿Existe una manera fácil de hacerlo sin depender de librerías/plugins externos (estoy usando jQuery)? Si no, ¿sabe de algún complemento de jQuery que pueda utilizar para hacer esto?

Answer 1

Esto no es posible con un textarea. Lo que se busca es un div content editable, que se realiza muy fácilmente:

<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 editable puede utilizar el método document.execCommand (more details) para proporcionar fácilmente el soporte para las etiquetas que ha especificado y para algunas otras funcionalidades.

#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

que tienen el mismo problema, pero a la inversa, y la solución siguiente. Quiero poner html de un div en un área de texto (para que pueda editar algunas reacciones en mi sitio web; quiero tener el área de texto en la misma ubicación.)

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

Para poner el contenido de este div en una textarea Yo uso:

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

Answer 4

Un adendo a esto. Puede usar entidades de caracteres (como cambiar <div> a <div>) y se mostrarán en el área de texto. Pero cuando se guarda, el valor de textarea es el texto como se representa. Entonces no necesitas descifrar. Acabo de probar esto en todos los navegadores (es decir, de vuelta a 11).

Answer 5

probar este ejemplo en 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> 

Editar por Jeffrey Crowder - Desarrollo Web/Windows programador

que añade un violín de JS del código.

Answer 6

Esto es posible con <textarea> la única cosa que hay que hacer es usar Summernote WYSIWYG editor

interpreta etiquetas HTML dentro de un área de texto (es decir, <strong>, <i>, <u>, <a>)