Renderización HTML dentro de textarea
Necesito ser capaz de renderizar algunas etiquetas HTML dentro de un área de texto (a saber, , , , ) pero las áreas de texto solo interpretan su contenido como texto. ¿Hay una manera fácil de hacerlo sin depender de bibliotecas/plugins externos (estoy usando jQuery)? Si no, ¿sabes de algún plugin de jQuery que pueda usar para hacer esto?
7 answers
Esto no es posible hacer con un textarea
. Lo que está buscando es un div contenido editable , que se hace muy fácilmente:
<div contenteditable="true"></div>
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-17 17:13:49
Con un div editable puede usar el método document.execCommand
(más detalles ) para proporcionar fácilmente el soporte para las etiquetas que especificó y para alguna otra funcionalidad..
#text {
width : 500px;
min-height : 100px;
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-24 10:38:06
Ya que solo dijiste render, sí puedes. Usted podría hacer algo a lo largo de las líneas de este:
function render(){
var inp = document.getElementById("box");
var data = `
<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml"
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;">
${inp.value} <i style="color:red">cant touch this</i>
</div>
</foreignObject>
</svg>`;
var blob = new Blob( [data], {type:'image/svg+xml'} );
var url=URL.createObjectURL(blob);
inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";
}
onload=function(){
render();
ro = new ResizeObserver(render);
ro.observe(document.getElementById("box"));
}
#box{
color:transparent;
caret-color: black;
font-style: normal;/*must be same as in the svg for caret to align*/
font-variant: normal;
font-size:13.3px;
padding:2px;
font-family:monospace;
}
<textarea id="box" oninput="render()">you can edit me!</textarea>
¡Esto hace que un textarea
renderice html!
Además del parpadeo al redimensionar, la incapacidad de usar clases directamente y tener que asegurarse de que el div en el svg
tenga el mismo formato que el textarea
para que el caret se alinee correctamente, ¡funciona!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-14 04:01:52
Pruebe 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-Desarrollador Web / programador de Windows
He añadido un violín JS del código.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-03 04:04:55
Tengo el mismo problema pero a la inversa, y la siguiente solución. Quiero poner html de un div en un área de texto (para poder 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 un área de texto utilizo:
var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>'+content+'</textarea>');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-17 01:15:02
Una adición a esto. Puede usar entidades de caracteres (como cambiar <div>
a <div>
) y se renderizará en el área de texto. Pero cuando se guarda, el valor del textarea es el texto como se representa. Así que no necesitas descodificar. Acabo de probar esto a través de navegadores (es decir, de nuevo a 11).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-05 22:13:39
Esto es posible con <textarea>
lo único que tienes que hacer es usar
Summernote WYSIWYG editor
Interpreta etiquetas HTML dentro de un área de texto (a saber <strong>
, <i>
, <u>
, <a>
)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-01 15:39:17