在 Rails ERB 中混合 HTML 和非 HTML 字符串

Question

我有一个文本区域，一些用户可以在其中输入 HTML（请不要评论这是不安全的，我已经采取了消毒对策）。

现在，我想展示一个 html 我的用户可以编写的代码示例。我如何在带有 ruby 的 .erb 模板文件中执行此操作？

最终用户的可视化输出应如下所示（没有语法高亮，注意换行！）

my_example_string :

Here is an example of sample code you can write in the text-area:
<p>Hello, dear Mr. X, new announcement</p>
<br>
<h2>The project</h2>
<p>blablabla</p>
<h2>Your role</h2>
<p>...</p>

EDIT ：实际的 HTML 输出看起来像

<p>
        Here is an example of sample code you can write in the text-area: !&lt;/p&gt;
&lt;p&gt;Hello, dear Mr. X, new announcement;/p&gt;
&lt;h2&gt;The project&lt;/h2&gt;
&lt;p&gt;Blablabla&lt;/p&gt;
...
</p>

我试过类似

<%= 'Here is an example of sample code you can write in the text-area:' +'<br>'.html_safe + 
    '<br>' + '<br>'.html_safe + 
    '<p>Hello, dear Mr. X, new announcement</p>'+'<br>'.html_safe + 
    '<h2>The project'</h2>' + ... %>

但输出看起来像（一行）

Here is an example of sample code you can write in the text-area:<br><br><br><p>Hello, dear Mr. X, new announcement</p><br><h2>The project</h2>

显然我不能混合使用 .html_safe 和非 .html_safe 字符串

有什么想法吗？

编辑 2：

我实际上使用的是自定义 helper/renderer，它将此伪工具提示 my_example_string 作为参数

my_view.html.erb

...
<%= render 'shared/field_with_tooltip',
        field: f.text_area(:body, placeholder: '', class: 'form-control', value: (@body if @body)),
        label: 'Body of the message',
        info: my_example_string %>

我的 field_with_tooltip 使用这样的信息变量

shared/field_with_tooltip.html.erb

...
<% if info %>
    <p class="text-info field-info"><%= info %></p><br>
<% end %>
...

Answer 1

除了使用 < 和 > 编写 HTML 实体本身，从而避免 Rails 必须完成工作：

<%= ('Here is an example of sample code you can write in the text-area:<br>' + 
h('<br>') + '<br>' + 
h('<p>Hello, dear Mr. X, new announcement</p>')+'<br>' + 
h('<h2>The project</h2>') + ...).html_safe %>

这里使用了html_escape helper 将你想要渲染的HTML 变成实体，然后你可以在整个结果字符串上调用html_safe 来避免你的问题通常运行进入 HTML 安全缓冲区。

我可能会通过完全避免 html_safe 并使用 Rails 所做的内置转义来清理它：

Here is an example of sample code you can write in the text-area:<br>
<%= '<br>' %><br>
<%= '<p>Hello, dear Mr. X, new announcement</p>' %><br>
<%= '<h2>The project</h2>' %>

后一种方法更简洁。

Answer 2

html_safe的目的是把一个普通的字符串处理成HTML，跟在字符串里面的标签后面。例如，这是一个 check_box 元素，其中标签将被处理为 粗体文本 :

<%= f.check_box :BLOCK, label: "<strong>Click to enable</strong>".html_safe%>

只是为了回顾一下，html_safe 取了一个包含 HTML 的字符串，并将其处理成 working HTML 。如果没有 html_safe，标签将是字符串本身。 (<strong>Click to enable</strong>)

是否要在工具提示中显示文本由您决定。我不建议这样做，因为对于短文本，工具提示通常很小。我建议将示例用户输入放在文本区域元素的左侧或右侧。这样，用户可以在需要时参考它，而无需将鼠标悬停在文本区域上。

无论您的设计如何，以下内容都可以满足您的期望输出。注意，我没有使用 html_safe，因为你想向用户显示原始代码，而不是处理后的代码。（意思是，您不想向用户显示 headers。）

<p>Here is an example of sample code you can write in the text-area:</p>
<ul style="list-style: none;">
  <li><code><%='<h1>Welcome to my website!</h1>'%></code></li>
  <li><code><%='<p>Here, you can submit code samples.</p>'%></code></li>
  <li><code><%='<p>Just enter your HTML code in the box!</p>'%></code></li>
  <li><code><%='<p>When you are done, hit Submit.</p>'%></code></li>
</ul>

目前，我找不到 ERB fiddle 网站。您可以想象上面的文字与下面的文字相似。（SO编辑器有限）：

Here is an example of sample code you can write in the text-area:

<h1>Welcome to my website!</h1>

<p>Here, you can submit code samples.</p>

<p>Just enter your HTML code in the box!</p>

<p>When you are done, hit Submit.</p>

只是为了比较，如果你使用 html_safe，它会是这样的：

Here is an example of sample code you can write in the text-area:

Welcome to my website!

Here, you can submit code samples.

Just enter your HTML code in the box!

When you are done, hit Submit.

在 Rails ERB 中混合 HTML 和非 HTML 字符串

Mix HTML and non-HTML strings in Rails ERB

html

ruby

ruby-on-rails

erb

Welcome to my website!