HTML: ¿Cómo conservar el formato en el área de texto?

Revisamos de forma completamente cada una de las noticias en nuestra página web con el objetivo de enseñarte siempre la información certera y actual.

Solución:

Lo que quieres es un editor de texto enriquecido. El HTML estándar </code> La etiqueta solo acepta texto sin formato (incluso si el texto es o incluye marcado HTML). Hay muchos ejemplos por ahí (incluidos algunos enumerados en la página vinculada), pero recomendaría encarecidamente usar uno preempaquetado para esto. Codificar el suyo es bastante complicado para las personas que son nuevas e incluso para muchos que tienen algo de experiencia. Tanto TinyMCE como CKEditor son muy comunes, pero también hay muchos otros.</p><div class="1156288aeb31a138c38144f0e15ac7e5" data-index="3" style="float: none; margin:5px 0 5px 0; text-align:center;"> <!-- banner-square --> <center><ins class="adsbygoogle square_ads" data-ad-client="ca-pub-9156923925267699" data-ad-slot="2153468894"></ins></center><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="1156288aeb31a138c38144f0e15ac7e5" data-index="3" style="float: none; margin:5px 0 5px 0; text-align:center;"> <!-- banner-square --> <center><ins class="adsbygoogle square_ads" data-ad-client="ca-pub-9156923925267699" data-ad-slot="2153468894"></ins></center><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p></p><div class="banner mobile"><div class=" "> </div> </div><div class="banner desktop"><div class=" "> </div> </div> <p>Un cuadro de texto es como wordpad, no puede formatearlo, si pega desde Word o cualquier otro texto formateado, borrará todo el formato y quedará solo el texto.</p> <p>Necesita agregar un editor a las áreas de texto, yo uso TinyMCE, pero también hay muchos otros por ahí.</p><div class="1156288aeb31a138c38144f0e15ac7e5" data-index="2" style="float: none; margin:5px 0 5px 0; text-align:center;"> <!-- rectangle-h-v --> <center><ins class="adsbygoogle rectangle_ads" data-ad-client="ca-pub-9156923925267699" data-ad-slot="6189735064"></ins></center><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p>Para implementarlo, debe tener todas las fuentes (que puede obtener de TinyMCE) en su directorio web.</p> <p>Aquí tienes un ejemplo que puedes probar:</p> <p>Agregue esto en la sección de encabezado de su página:</p> <pre><code><script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js" defer></script> <script language="javascript" type="text/javascript"> tinyMCE.init( theme : "advanced", mode: "exact", elements : "elm1", theme_advanced_toolbar_location : "top", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator," + "justifyleft,justifycenter,justifyright,justifyfull,formatselect," + "bullist,numlist,outdent,indent", theme_advanced_buttons2 : "link,unlink,anchor,image,separator," +"undo,redo,cleanup,code,separator,sub,sup,charmap", theme_advanced_buttons3 : "", height:"350px", width:"600px" ); </script> <script type="text/javascript"> tinyMCE.init(,print,); </script> </code></pre> <p>Luego, para llamar al área de texto:</p><div class="1156288aeb31a138c38144f0e15ac7e5" data-index="5" style="float: none; margin:5px 0 5px 0; text-align:center;"> <!-- in-feed-foroayuda --> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fj+41+cd-aa-ix" data-ad-client="ca-pub-9156923925267699" data-ad-slot="3077514231"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <pre><code><textarea name="content" style="width:100%">YOUR TEXT HERE

NB: Necesita descargar y tener en su directorio los archivos js para

¡Espero que esto ayude!

Esto no resolverá el caso en el que desee que alguien pueda formatear su texto (por ejemplo, con botones en negrita WYSIWYG, etc.), pero si desea poder aceptar HTML preformateado (por ejemplo, copiar y pegar desde otra fuente HTML como una página web), puede hacer esto:

Paste your HTML in the box below

Esto usa un contenteditablediv elemento que puede formatear para que parezca un cuadro de entrada y aceptará HTML pegado, y un elemento oculto textarea#foo que se completará con el HTML pegado justo antes de enviar el formulario.

Tenga en cuenta que esta no es una solución accesible tal como está.

No se te olvide comunicar esta reseña si te fue de ayuda.

---

---

Utiliza Nuestro Buscador