HTML: come mantenere la formattazione in textarea?

Question

• Sto usando textarea HTML per l'utente di inserire alcuni dati e salvo che il modello di App Engine
• Il problema è che quando ho recuperare il contenuto è solo testo e tutta la formattazione è andato
• Il motivo è perché in textarea non v'è alcuna formattazione che possiamo fare

domanda:

• c'è un modo per mantenere il formato che l'utente fornisce?
• c'è qualche altro elemento (diverso da textarea), che dovrò usare? (Quale?)

PS Sono molto nuovo alla zona di sviluppo web e lavorare sul mio primo progetto

Grazie

Answer 1

Quello che vuoi è un Rich Text Editor. Il tag HTML standard <textarea> accetta solo testo normale (anche se il testo è o include markup HTML). Ci sono molti esempi là fuori (compresi alcuni elencati nella pagina collegata) ma raccomando vivamente di usare uno preimpostato per questo. Codificare il proprio è abbastanza complicato per le persone che sono nuove e anche per molti che hanno una certa esperienza. Entrambi TinyMCE e CKEditor sono molto comuni, ma ce ne sono molti altri.

Answer 2

Una casella di testo è come il wordpad, non è possibile formattarlo, se si incolla da una parola o qualsiasi altro testo formattato si cancellerà tutta la formattazione e rimarrà solo il testo.

È necessario aggiungere un editor alle aree di testo, io uso TinyMCE, ma ce ne sono molti altri là fuori.

Per implementare è necessario disporre di tutta la sorgente (che è possibile ottenere da TinyMCE) nella propria directory Web.

Ecco un esempio che si può provare:

Aggiungere questo la sezione head della pagina:

<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> 

Poi chiamare textarea:

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

NB: E 'necessario per scaricare e inserire nella directory i file js per <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>

Spero che questo aiuti!

Answer 3

Questo non risolverà il caso in cui si desidera che qualcuno sia in grado di formattare il testo (ad esempio con pulsanti in grassetto WYSIWYG ecc.), Ma se si desidera essere in grado di accettare HTML pre-formattato (ad esempio copia e incolla da altra fonte di HTML, come una pagina web), allora si può fare questo:

<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> 

questo utilizza un elemento contenteditablediv cui è possibile formattare per assomigliare ad una casella di input e accetterai incollata HTML, ed una nascosta textarea#foo che verrà popolato con l'HTML incollato appena prima della presentazione del modulo.

Si noti che questa non è una soluzione accessibile così com'è.