HTML: Cách giữ lại định dạng trong vùng văn bản?

Question

• Tôi đang sử dụng HTML textarea cho người dùng nhập vào một số dữ liệu và tiết kiệm đó để mô hình App Engine của
• Vấn đề là khi tôi lấy nội dung nó chỉ là văn bản và tất cả các định dạng đã biến mất
• Lý do là vì trong textarea không có định dạng mà chúng ta có thể làm cho

Câu hỏi:

• là có cách nào để giữ lại các định dạng mà người dùng cung cấp?
• là có bất kỳ yếu tố khác (ngoài textarea), mà tôi sẽ phải sử dụng? (Cái nào?)

PS Tôi rất mới đến khu vực phát triển web và làm việc trên dự án đầu tiên của tôi

Cảm ơn bạn

Answer 1

Điều bạn muốn là Rich Text Editor. Thẻ HTML <textarea> tiêu chuẩn chỉ chấp nhận văn bản thuần túy (ngay cả khi văn bản có hoặc bao gồm đánh dấu HTML). Có rất nhiều ví dụ trên mạng (bao gồm một số được liệt kê trên trang được liên kết) nhưng tôi rất khuyên bạn nên sử dụng một gói đóng gói sẵn cho việc này. Mã hóa của riêng bạn là khá phức tạp đối với những người mới, và thậm chí đối với rất nhiều người có một số kinh nghiệm. Cả hai số TinyMCE và CKEditor đều rất phổ biến, nhưng cũng có nhiều loại khác.

Answer 2

Một hộp văn bản giống như bảng chữ cái, bạn không thể định dạng nó, nếu bạn dán từ từ hoặc bất kỳ văn bản được định dạng nào khác, nó sẽ xóa tất cả định dạng và bạn sẽ chỉ còn lại văn bản.

Bạn cần thêm trình chỉnh sửa vào các vùng văn bản, tôi sử dụng TinyMCE, nhưng cũng có nhiều trình chỉnh sửa khác.

Để triển khai, bạn cần có tất cả nguồn (mà bạn có thể nhận được từ TinyMCE) trong thư mục web của mình.

Dưới đây là một ví dụ mà bạn có thể thử:

Thêm này phần đầu trang của bạn:

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

Sau đó, để gọi textarea:

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

NB: Bạn cần để tải xuống và có trong thư mục của bạn các tệp js cho <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>

Hy vọng điều này sẽ hữu ích!

Answer 3

Điều này sẽ không giải quyết được trường hợp bạn muốn ai đó có thể định dạng văn bản của họ (ví dụ với nút in đậm WYSIWYG, v.v.), nhưng nếu bạn muốn chấp nhận HTML được định dạng trước (ví dụ: sao chép và dán từ nguồn HTML khác như một trang web), sau đó bạn có thể làm điều này:

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

này sử dụng một yếu tố contenteditablediv mà bạn có thể định dạng trông giống như một hộp nhập liệu và sẽ chấp nhận HTML dán, và một ẩn textarea#foo mà sẽ được điền bằng HTML được dán ngay trước khi biểu mẫu được gửi.

Lưu ý rằng đây không phải là giải pháp có thể truy cập được.