HTML：テキストエリアでの書式設定の保持方法

Question

• 私はいくつかのデータを入力するユーザーのためのHTMLのtextareaを使用してApp Engineのモデルにそれを保存しています
• 問題は、私がコンテンツを取得するとき、それは単なるテキストであり、すべての書式は、理由があるためである
• なくなっているということですテキストエリアに私たちが作ることができる何の書式はありません

質問：

• ユーザーが提供する形式を保持する方法はありますか？
• （テキストエリア以外の）他の要素は、私が使用する必要がありますこと、ありますか？（その1？）私はウェブ開発の分野に非常に新しいですし、私の最初のプロジェクトに取り組ん

PS

ありがとうございました

Answer 1

Rich Text Editorです。標準のHTML <textarea>タグはプレーンテキストのみを受け入れます（テキストにHTMLマークアップが含まれていてもその場合でも）。そこには多くの例があります（ページにリンクされているものもあります）が、これにはあらかじめパッケージ化されたものを使うことを強くお勧めします。自分自身をコーディングすることは、新しい人や経験のある人にとってもかなり複雑です。 TinyMCEとCKEditorは非常に一般的なものですが、他にも多くのものがあります。

Answer 2

テキストボックスはワードパッドに似ていますが、それをフォーマットすることはできません。単語やその他の書式付きテキストからペーストすると、すべての書式が消去され、テキストだけが残されます。

テキスト領域にエディタを追加する必要があります。私はTinyMCEを使用しますが、そこには他にも多くのものがあります。

ウェブディレクトリにすべてのソース（TinyMCEから入手可能）を持たせる必要があります。ここで

はあなたが試すことができます例です：

は、このあなたのページのheadセクションを追加します。

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

次にテキストエリアを呼び出すために：

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

はNB：あなたが必要ですあなたのディレクトリにダウンロードしてjsファイルを持っています<script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>

これが役立つことを願っています！

Answer 3

誰かがテキストを書式設定することができるようにする場合（WYSIWYG太字ボタンなどで）、ただし書式設定済みのHTMLを受け入れることができるようにしたい場合は解決しません（コピーアンドペーストWebページなどの他のHTMLソース）から、あなたはこれを行うことができます。

は

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

これは、あなたが入力ボックスに見えるようにフォーマットすることができますして貼り付けHTMLを受け入れるcontenteditablediv要素を使用し、隠されたtextarea#fooましたフォームが送信される直前に貼り付けられたHTMLが挿入されます。

これは、利用可能な解決策ではありません。