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

我实际上正在使用一个自定义的帮助器/渲染器，它将这个伪工具提示 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 帮助器将您要呈现的 HTML 转换为实体，然后您可以在整个结果字符串上调用 html_safe 以避免通常在使用 HTMLSafe 缓冲区时遇到的问题。

我可能会通过完全避免 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 的字符串，并将其处理成工作 HTML。如果没有html_safe，标签将是字符串本身。 (<strong>Click to enable</strong>)

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

无论您的设计如何，以下内容都应该适用于您想要的输出。请注意，我没有使用html_safe，因为您想向用户显示原始代码，而不是处理后的代码。 （意思是，你不想向用户显示标题。）

<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 小提琴网站。您可以想象上面的文本看起来与下面的相似。 （SO 编辑器有限）：

这是您可以在文本区域中编写的示例代码示例：

<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，它的外观是这样的：

这是您可以在文本区域中编写的示例代码示例：

欢迎来到我的网站！

在这里，您可以提交代码示例。

只需在框中输入您的 HTML 代码！

完成后，点击提交。