将文本格式添加到textarea [英] Adding text formatting to textarea

问题描述

我有一个接受HTML的textarea并将用户输入的消息发送到电子邮件。现在我想更进一步，让没有HTML知识的用户更容易进一步利用textarea。

I've got a textarea that accepts HTML and sends the message a user types to an email. Now I'd like to go a step further and make it easier for users with no HTML knowledge to further utilize the textarea.

如何制作一个格式在顶部的textarea，就像stackoverflow中的那个问题一样？

How do I go about making a textarea with formatting at the top like the one in stackoverflow's ask a question?

编辑
感谢您的所有好的答案，但我决定选择 Hanoncs的答案，因为这是最直接的。如果有人喜欢看起来更好看，请查看 BakerStreet的回答。

EDIT Thanks for all your great answers, but I've decided to go with Hanoncs's answer as that's the most straight forward. If anyone likes a better looking one, check out BakerStreet's answer.

推荐答案

在下面的演示中，您需要在启用按钮之前单击文本区域。

In the below demo, you need to click on the text area before the buttons are enables.

<div id="sample">
  <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
  bkLib.onDomLoaded(function() {
        new nicEditor().panelInstance('area1');
        new nicEditor({fullPanel : true}).panelInstance('area2');
        new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');
        new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area4');
        new nicEditor({maxHeight : 100}).panelInstance('area5');
  });
  //]]>
  </script>
  <h4>
    Default (No Config Specified)
  </h4>
  <p>
    new nicEditor().panelInstance('area1');
  </p>
  <textarea cols="50" id="area1">
</textarea>
  <h4>
    All Available Buttons {fullPanel : true}
  </h4>
  <p>
    new nicEditor({fullPanel : true}).panelInstance('area2');
  </p>
  <textarea cols="60" id="area2">
Some Initial Content was in this textarea
</textarea>
  <h4>
    Change Path to Icon File {iconsPath : 'path/to/nicEditorIcons.gif'}
  </h4>
  <p>
    new nicEditor({iconsPath : 'nicEditorIcons.gif'}).panelInstance('area3');
  </p>
  <textarea cols="50" id="area3">
</textarea>
  <h4>
    Customize the Panel Buttons/Select List
  </h4>
  <p>
    {buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']}
  </p>
  <textarea cols="50" id="area4">
HTML content default in textarea
</textarea>
  <h4>
    Set a maximum expansion size (maxHeight)
  </h4>
  <p>
    {maxHeight : 100}
  </p>
  <textarea style="height: 100px;" cols="50" id="area5">
HTML content default in textarea
</textarea>
</div>

这篇关于将文本格式添加到textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！