HTML：如何在textarea中保留格式？ 我使用HTMLTextArea让用户输入一些数据并将其保存到应用程序引擎的模型中 问题是，当我检索内容时，它只是文本，所有格式都消失了 原因是在textarea中，我们无法进行格式化

问题:

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

另外，我对网络开发领域非常陌生，正在从事我的第一个项目

---

谢谢你

你想要的是一份工作。标准HTML

标记只接受纯文本（即使文本是或包含HTML标记）。有很多例子（包括链接页面上列出的一些），但我强烈建议使用预包装的。编写自己的代码对于新手来说相当复杂，甚至对于很多有经验的人来说也是如此。和都是非常常见的，但也有很多其他的。文本框就像写字板一样，你无法格式化它，如果你从word或任何其他格式化文本粘贴，它将擦除所有格式，只留下文本

你需要在我使用的文本区域中添加一个编辑器，但是还有很多其他编辑器

要实现此功能，您需要将所有源代码（可以从中获取）都放在web目录中

下面是一个您可以尝试的示例：

在页面的标题部分添加以下内容：

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

tinyMCE.init({
主题：“高级”，
模式：“精确”，
元素：“elm1”，
主题\高级\工具栏\位置：“顶部”，
主题高级按钮1：“粗体、斜体、下划线、删除线、分隔符，”
+JustifLeft、JustifCenter、JustifRight、JustifFull、formatselect、
+“金块、金块、凸出、缩进”，
主题高级按钮2：“链接、取消链接、锚定、图像、分隔符，”
+“撤消、重做、清理、编码、分隔符、子、辅助、字符映射”，
主题\高级\按钮3:“”，
高度：“350px”，
宽度：“600px”
});
tinyMCE.init({
//一般选择
模式：“文本区域”，
主题：“高级”，
插件：“自动链接、列表、拼写检查器、分页符、样式、图层、表格、保存、advhr、advimage、advlink、情感、iSpell、inlinepopups、insertdatetime、预览、媒体、搜索替换、打印、上下文菜单、粘贴、方向性、全屏、不可编辑、visualchars、非中断、xhtmlxtras、模板”，
//主题选项
主题_高级_按钮1：“保存、新建文档、|、粗体、斜体、下划线、删除线、|、左对齐、居中对齐、右对齐、满对齐、|、样式选择、格式选择、字体选择、字体大小选择”，
主题高级按钮2：“剪切、复制、粘贴、粘贴文本、粘贴文字、搜索、替换、布利斯特、numlist、outdent、indent、blockquote、|、撤消、重做、链接、取消链接、锚定、图像、清理、帮助、代码、插入日期、插入时间、预览、前景色、后景色”，
主题|高级|按钮3：“表格控件，|，hr，removeformat，visualaid，|，sub，sup，|，charmap，情感，易趣，媒体，advhr，|，打印，|，ltr，rtl，|，全屏”，
theme_advanced_按钮4:“插入层、向前移动、向后移动、绝对、|、styleprops、拼写检查器、|、引用、缩写、首字母缩略词、del、ins、attribs、|、visualchars、非中断、模板、块引号、页面中断、|、插入文件、插入图像”，
主题\高级\工具栏\位置：“顶部”，
主题\高级\工具栏\对齐：“左”，
主题\高级\状态栏\位置：“底部”，
主题\u高级\u大小调整：正确，
//皮肤选择
皮肤：“o2k7”，
皮肤变种：“银色”，
//示例内容CSS（应该是您的网站CSS）
content_css：“css/example.css”，
//链接/图像/媒体/模板对话框的下拉列表
模板\u外部\u列表\u url:“js/template\u list.js”，
外部链接列表url:“js/link\u list.js”，
外部图片列表url:“js/image\u list.js”，
媒体外部列表url:“js/media\u list.js”，
//替换模板插件的值
模板替换值：{
用户名：“某个用户”，
标记：“991234”
}
});

然后调用textarea：

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

此处显示您的文本

注意：您需要下载

js文件并将其保存在您的目录中

---

希望这有帮助

当您希望某人能够格式化其文本（例如，使用所见即所得粗体按钮等）时，这无法解决问题，但如果您希望能够接受预格式化的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>

将HTML粘贴到下面的框中
jQuery（函数（）{
jQuery（'form'）。提交（函数（e）{
jQuery（'textarea'）.val（jQuery（'htmlsource'）.html（））；
});
});

这使用了一个

contenteditable

div

元素，您可以将其格式化为一个输入框，并接受粘贴的HTML，以及一个隐藏的

textarea#foo

，在提交表单之前，该元素将填充粘贴的HTML

---

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

根据您的程序目标，只需在文本区域的输入端左右添加“pre”标记就足够了。例如，如果您的代码将文本区域中的任何内容提交到表单，然后在目标文件中对其进行回显，那么这就已经起作用了

> File 1:
> 
>     <form action="Output.php" methode=post>
>     <textarea name="Input"></textarea>
>     </form>
> 
> File Output.php
> 
>     $UserInput = $_POST["Input"];
>     $UserInput = "<pre>" . $UserInput . "</pre>"
>     echo $UserInput

>文件1：
> 
>     
>     
>     
> 
>文件Output.php
> 
>$UserInput=$\u POST[“输入”]；
>$UserInput=”“$用户输入。""
>echo$UserInput

这将保留所有输入，例如在原始用户输入中使用的输入，并正确地回显它们

---

如果您从应用程序引擎中检索内容，则在大多数情况下，使用已添加的预标记保存内容会起到关键作用

，这是最简单的解决方案。感谢您提供contenteditable属性。救了我一天！