Question

＆lt; p＆gt;我试图建立一个评论系统，它刚刚实现。文本区域无法格式化，这意味着不能保留段落，换行符等。我知道stackoverflow使用文本编辑器而不是文本区域，但在Reddit等网站上，它只是一个普通的textarea。＆lt; / p＆gt; ＆lt; p＆gt;格式化textarea的值是用javascript完成的吗？＆lt; / p＆gt;

Answer 1

在textarea值中，换行符标有EOL字符（/ r，/ n或/ r / n）。这些字符对HTML没有任何视觉影响（仅在源代码中）。您想要的是通过将其替换为 或

来使其可见

您最好的选择是在显示文字时替换这些字符，这样一来，如果用户修改了评论，您的用户就不会看到这些标记。

当文本被单个或双星号（*）包围时，有一些更多选项，如添加和会给你一个相当接近的stackoverflow格式，它确实使用textarea不同你相信。

编辑：像其他人建议的那样，存在WYSIWYG（所见即所得）编辑器，这意味着用户可以完全看到他的评论结果，并且可以编辑样式，就像它们在Microsoft Word或类似文件中一样。这种方法可能没问题，但对于评论来说却有点过分。 Reddit和stackoverflow允许在发布之前查看您的内容的预览，但是他们不允许在键入时看到实时结果。 2个解决方案都可以工作，您只需选择一个您认为最适合您用户的解决方案。

另外，当使用简单的textarea时，你可能想看降价，你可以提供降价支持（这与我们在这里格式化文本的方式非常接近），这样一些人甚至不需要（ re）学习如何在您的网站上格式化他们的文本，因为它与其他网站/工具相同。

EDIT2：

以下是4个样式应用程序的快速/基本实现：单行换行，双行换行到段落，双星号表示粗体，单个星号表示斜体。

＆＃13;

$("#editor").on('keyup', function(e) {
  var input = $(e.target).val();
  input = input.replace(/[\n]{2}/, '</p><p>');
  input = input.replace(/[\n]{1}/, '<br/>');
  input = input.replace(/\*\*(.+)\*\*/, '<strong>$1</strong>');
  input = input.replace(/\*(.+)\*/, '<em>$1</em>');
  $('#result').html('<p>' + input + '</p>');
});

＆＃13;

#result {
  border: 1px solid #777;
  background-color: #CCC;
}
#editor{
  width:100%;
  height:100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="editor">

</textarea>

<div id="result">

</div>

＆＃13;

Answer 2

让我们说清楚一些事情。 textarea就是这样;一个“文本区域”。它包含纯文本，并且为了记录，textarea保留换行符。但你是对的;除此之外它没有任何功能。没有样式，它不会自动插入段落标签，或者具有您正在寻找的任何其他高级功能。

听起来像你正在寻找一个基于网络的WYSIWYG（你看到的是你得到的）编辑器。提供简单功能的东西，如粗体文本，缩进/文本对齐按钮等等。最受欢迎/最着名的两个是CK Editor和Tiny MCE，它们都使用Javascript来运行： https://ckeditor.com/ https://www.tinymce.com/

TinyMCE是最简单的。他们有自己的图书馆CDN所以你要做的就是复制并粘贴几行代码以使其工作。两个库都附带免费和高级插件，提供图像上传等高级功能。

你的第二种方法;从HTML 5开始，HTML元素现在可以使用 contenteditable 属性，该属性允许网页中的HTML内容变得可编辑。您可以创建div /元素并操纵这些元素以具有样式。这种方法有一些缺陷，最大的问题是旧浏览器的兼容性，其次是将数据发布到其他网页，这迫使使用Javascript将HTML元素的内容复制到隐藏的输入或文本区域。

这个人（我相信来自这个网站）开发了一个有用的WYSIWYG编辑器，用于实现可信的方法： http://habibhadi.com/lab/easyeditor/

Answer 3

如果您需要高级格式设置，例如和，则您需要使用启用了contenteditable属性的元素（很可能是<div>）。例如：

<div contenteditable><em>Hello</em> <strong>world</strong></div>

要创建允许用户格式化文本的用户界面，请参阅：

如何在<textarea>中完成格式化？

3 个答案: