向文本区域添加文本格式 - Adding text formatting to textarea

Adding text formatting to textarea

本文关键字：文本格式添加区域 | 更新日期: 2023-09-27

我有一个文本区域，它接受 HTML 并将用户键入的消息发送到电子邮件。现在我想更进一步，让没有HTML知识的用户更容易进一步使用文本区域。

我如何制作一个顶部格式的文本区域，就像 stackoverflow 问问题中的那个一样？

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

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

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

Stack overflow 使用 markdown，然后将其转换为 HTML。如果你想使用markdown，这里有一个不错的教程的链接：

降价教程

另一方面，如果你想编辑直接的HTML，我个人的偏好是使用wysihtml5这样的东西，因为我几乎把Bootstrap用于我所做的一切，我喜欢使用wysihtml5的bootstrappy版本。

祝你好运！

你需要添加 ckeditor有关如何使用，请点击此链接。

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

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

要替换元素，只需为其分配 ckeditor 类，如下代码所示：

请注意，其他属性（如 id 或名称）需要根据文档进行调整。