HTML: ¿Cómo conservar el formato en textarea?

Question

• estoy usando área de texto HTML de usuario que introduzca algunos datos y guardar que el modelo de App Engine
• El problema es que cuando puedo recuperar el contenido es sólo texto y todo el formato se ha ido
• La razón es porque en el área de texto no hay formato que podemos hacer

pregunta:

• ¿hay alguna manera de conservar el formato que el usuario proporciona?
• ¿hay algún otro elemento (aparte de área de texto), que voy a tener que usar? (¿Cuál?)

PS soy muy nuevo en el área de desarrollo web y trabajando en mi primer proyecto

Gracias

Answer 1

Lo que quiere es Rich Text Editor. La etiqueta estándar HTML <textarea> solo acepta texto sin formato (incluso si el texto es o incluye marcado HTML). Hay muchos ejemplos (incluidos algunos enumerados en la página vinculados), pero recomiendo encarecidamente usar uno preempaquetado para esto. Codificar el suyo es bastante complicado para las personas que son nuevas, e incluso para muchas que tienen alguna experiencia. Ambos TinyMCE y CKEditor son muy comunes, pero también hay muchos otros.

Answer 2

Un cuadro de texto es como un WordPad, no se puede formatear, si se pega desde la palabra o cualquier otro texto formateado se borrará todo el formato y se quedará con el texto.

Necesita agregar un editor a las áreas de texto, yo uso TinyMCE, pero hay muchos otros también.

Para implementar necesita tener toda la fuente (que puede obtener desde TinyMCE) en su directorio web.

He aquí un ejemplo que se puede probar:

Añadir esta el la sección de cabecera de su página:

<script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></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({ 
    // General options 
    mode : "textareas", 
    theme : "advanced", 
    plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 

    // Theme options 
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", 
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_resizing : true, 

    // Skin options 
    skin : "o2k7", 
    skin_variant : "silver", 

    // Example content CSS (should be your site CSS) 
    content_css : "css/example.css", 

    // Drop lists for link/image/media/template dialogs 
    template_external_list_url : "js/template_list.js", 
    external_link_list_url : "js/link_list.js", 
    external_image_list_url : "js/image_list.js", 
    media_external_list_url : "js/media_list.js", 

    // Replace values for the template plugin 
    template_replace_values : { 
      username : "Some User", 
      staffid : "991234" 
    } 
}); 
</script> 

Luego de llamar al área de texto:

<textarea name="content" style="width:100%">YOUR TEXT HERE</textarea> 

Nota: Es necesario para descargar y tener en su directorio los archivos js para <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>

Espero que esto ayude!

Answer 3

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

<form ...> 
<label>Paste your HTML in the box below</label> 
<textarea style='display:none' id='foo'></textarea> 
<div id='htmlsource' contenteditable style='border:solid 1px black;padding:1em;width:100%;min-height:2em;' ></div> 
<input type='submit' /> 
</form> 

<script> 
jQuery(function(){ 
    jQuery('form').submit(function(e) { 
     jQuery('textarea').val(jQuery('#htmlsource').html()); 
     }); 
}); 
</script> 

este utiliza un elemento de contenteditablediv cual puede dar formato a parecerse a un cuadro de entrada y aceptará HTML pegado, y una oculta textarea#foo cuales se rellenará con el HTML pegado justo antes de enviar el formulario.

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