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

I am using HTML textarea for user to input some data and save that to App Engine's model

我正在使用HTML textarea为用户输入一些数据并将其保存到App Engine的模型中

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

原因是因为在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

P.S我是Web开发领域的新手,也是我的第一个项目

Thank you

3 个解决方案

#1

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 TinyMCE and CKEditor are very common ones, but there are many others as well.

你想要的是富文本编辑器。标准HTML 标记仅接受纯文本(即使文本是或包含HTML标记)。那里有很多例子(包括链接页面上列出的一些例子)但我强烈建议使用预先打包的例子。对于那些新手,甚至很多有经验的人来说,编写自己的编码都相当复杂。 TinyMCE和CKEditor都是非常常见的,但也有很多其他的。</p>

#2

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.

一个文本框就像wordpad,你不能格式化它,如果你从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:

将其添加到页面的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>

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>

注意:您需要下载并在您的目录中为

Hope this helps!

希望这可以帮助!

#3

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:

如果您希望某人能够格式化文本(例如,使用WYSIWYG粗体按钮等),但是如果您希望能够接受预先格式化的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 contenteditable div element which you can format to look like an input box and will accept pasted HTML, and a hidden textarea#foo which will be populated with the pasted HTML just before the form is submitted.

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

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

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

#1

#2