在我的Rails 3应用程序中,我使用textarea
让用户在论坛中编写新消息。
然而,当显示消息时,所有换行符看起来都像空格(没有<br />
)。也许还有其他不匹配的例子,我还不知道。
我想知道处理这件事最合适的方法是什么。
我猜存储在数据库中的文本是OK的(我看到例如<
被转换为<
),所以主要问题是呈现。
在Rails中有内置的帮助方法吗?
(simple_format做了一些看起来类似于我需要的东西,但它添加了我不想出现的<p>
标签。)
Rails提供了一个辅助方法,因此您不必编写自己的方法。
来自文档:
simple_format(text, html_options={}, options={})
my_text = "Here is some basic text...n...with a line break."
simple_format(my_text)
# => "<p>Here is some basic text...n<br />...with a line break.</p>"
more_text = "We want to put a paragraph...nn...right there."
simple_format(more_text)
# => "<p>We want to put a paragraph...</p>nn<p>...right there.</p>"
simple_format("Look ma! A class!", :class => 'description')
# => "<p class='description'>Look ma! A class!</p>"
您可以在文本周围的html标记中使用style="white-space: pre-wrap;"
。这尊重文本中的任何换行。
由于simple_format
不做您想要的,我将制作一个简单的辅助方法来将换行符转换为<br>
s:
def nl2br(s)
s.gsub(/n/, '<br>')
end
然后在你的视图中你可以这样使用:
<%= nl2br(h(@forum_post.message)) %>
如果有人仍然被重定向到这里并使用Rails 4:http://apidock.com/rails/v4.0.2/ActionView/Helpers/TextHelper/simple_format
你现在可以指定它被包装的标签(默认为p),像这样:
simple_format(my_text, {}, wrapper_tag: "div")
# => "<div>Here is some basic text...n<br />...with a line break.</div>"
CSS-only选项
我相信最简单的选择之一就是使用css white-space: pre-line;
其他回答也提到了使用空白,但我认为它需要更多的信息:
在大多数情况下,您应该选择pre-line
而不是pre-wrap
。
记住white-space
是非常重要的,你不应该做这样的事情:
<p style="white-space: pre-line;">
<%= your.text %>
</p>
它将在输出中产生额外的空格和换行符。取而代之的是:
<p style="white-space: pre-line;"><%= your.text %></p>
HTML选择
另一种方法是用<pre>
标签包装文本。最后要注意的是,这里的CSS选项也是true:
<p>
<pre><%= your.text %></pre>
</p>
不要用空格或换行符将文本与<pre>
标签分开。
最终想法
在google上搜索了一下之后,我有一种感觉,认为html方法不如css方法干净,我们应该采用css方式。然而,html-way似乎更兼容浏览器(支持旧浏览器,但谁在乎呢):
前标签
空白
下面的帮助器保留新行作为换行符,并将任何HTML或脚本(例如javascript)呈现为纯文本。
def with_new_lines(string)
(h(string).gsub(/n/, '<br/>')).html_safe
end
在视图中使用as so
<%= with_new_lines @object.some_text %>
我只使用white-space: pre-line
。所以下一行(n)将渲染它
您需要将文本区的纯文本转换为HTML。
在最基本的层次上,你可以运行一个字符串替换:
message_content.gsub! /n/, '<br />'
你也可以使用特殊的格式,如Markdown (Ruby库:BlueCloth)或Textile (Ruby库:RedCloth)。
我在rails应用程序中使用Ace代码编辑器,我有问题,每当我更新或创建代码时,它总是在每行上添加额外的TAB(除了第一行)。我无法解决它与gsub或javascript替换…但它意外地解决了自己当我禁用布局的模板。
所以,我用 解决了这个问题render :layout => false