Question

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

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

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

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

堆栈溢出使用markdown，然后转换为HTML。如果你想使用markdown，这里有一个体面教程的链接：

Markdown Tutorial

另一方面，如果你想编辑直接的HTML，我的个人偏好是使用类似wysihtml5的东西，因为我使用Bootstrap来处理我所做的一切，我喜欢使用{{3} }。

祝你好运！

Answer 3

您需要添加ckeditor 如何使用关注this link。

<script src="../ckeditor.js"></script>
<textarea class="ckeditor" name="editor1"></textarea>

此示例演示如何使用CKEditor实例自动替换给定类的所有元素。

要替换元素，只需为其指定ckeditor类，如下面的代码所示：

请注意，需要根据您的文档调整其他属性（如ID或名称）。

将文本格式添加到textarea

3 个答案: