欢迎来到我的网站！

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>

编辑：实际的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像这样使用info变量

共享/ 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代码！

完成后，点击提交。

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

2 个答案:

欢迎来到我的网站！