HTML：如何在 textarea 中保留格式？

HTML : How to retain formatting in textarea?

提问by daydreamer

• I am using HTML textarea for user to input some data and save that to App Engine's model
• The problem is that when I retrieve the content it is just text and all formatting is gone
• The reason is because in textarea there is no formatting that we can make

• 我正在使用 HTML textarea 供用户输入一些数据并将其保存到 App Engine 的模型中
• 问题是，当我检索内容时，它只是文本，所有格式都消失了
• 原因是因为在 textarea 中没有我们可以制作的格式

Question:

题：

• is there any way to retain the format that user provides?
• is there any other element(other than textarea), that i'll have to use?(which one?)

• 有没有办法保留用户提供的格式？
• 是否有任何其他元素（除了 textarea），我必须使用？（哪个？）

P.S I am very new to area of web development and working on my first project

PS 我对 Web 开发领域很陌生，正在从事我的第一个项目

Thank you

谢谢

采纳答案by LoveAndCoding

What you want is a Rich Text Editor. The standard HTML <textarea>tag only accepts plain text (even if the text is or includes HTML markup). There are a lot of example out there (including some listed on the page linked) but I would highly recommend using a prepackaged one for this. Coding your own is fairly complicated for people who are new, and even for a lot who have some experience. Both TinyMCEand CKEditorare very common ones, but there are many others as well.

您想要的是富文本编辑器。标准 HTML<textarea>标签只接受纯文本（即使文本是或包含 HTML 标记）。那里有很多示例（包括链接页面上列出的一些示例），但我强烈建议为此使用预先打包的示例。对于新手，甚至对于很多有经验的人来说，编写自己的代码是相当复杂的。无论TinyMCE的和CKEditor的是很常见的，但也有一些其他的方面。

回答by iain

A text box is like wordpad, you cant format it, if you paste in from word or any other formatted text it will wipe all the formatting and you will be left with just the text.

文本框就像写字板，你不能格式化它，如果你从 word 或任何其他格式化文本粘贴，它会清除所有格式，你将只剩下文本。

You need add an editor to the text areas, I use TinyMCE, but there are many other out there too.

您需要向文本区域添加一个编辑器，我使用TinyMCE，但还有很多其他的。

To implement you need to have all the source (which you can get from TinyMCE) in your web directory.

要实现，您需要在您的 Web 目录中拥有所有源代码（您可以从TinyMCE获得）。

Here's an example which you can try:

这是您可以尝试的示例：

Add this the the head section of your page:

将此添加到页面的头部部分：

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

Then to call the textarea:

然后调用textarea：

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

NB: You need to download and have in your directory the js files for <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>

注意：您需要下载并在您的目录中包含 js 文件 <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>

Hope this helps!

希望这可以帮助！

回答by artfulrobot

This won't solve the case when you want somebody to be able to format their text (e.g. with WYSIWYG bold buttons etc.), but if you want to be able to accept pre-formatted HTML (e.g. copy and paste from other HTML source such as a webpage), then you can do this:

如果您希望某人能够格式化他们的文本（例如使用所见即所得的粗体按钮等），但如果您希望能够接受预先格式化的 HTML（例如从其他 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>

This uses a contenteditabledivelement which you can format to look like an input box and will accept pasted HTML, and a hidden textarea#foowhich will be populated with the pasted HTML just before the form is submitted.

这使用了一个contenteditablediv元素，您可以将其格式化为输入框并接受粘贴的 HTML，以及一个隐藏元素，该元素textarea#foo将在提交表单之前填充粘贴的 HTML。

Note that this is not an accessible solution as it stands.

请注意，这不是一个可访问的解决方案。