Trix 富文本编辑器在 new.html.erb 中工作，但在 show.html.erb 视图中呈现代码而不是样式文本（在浏览器中显示）答案

【问题标题】：Trix Rich Text Editor works in new.html.erb but renders code in show.html.erb view instead of styled text(display in browser)Trix 富文本编辑器在 new.html.erb 中工作，但在 show.html.erb 视图中呈现代码而不是样式文本（在浏览器中显示）
【发布时间】：2021-11-11 20:23:28
【问题描述】：

我遇到了一个奇怪的问题。

我最近在我的 Rails 应用程序中安装了 Trix。一切都很顺利，直到我尝试发布一篇博文并发现诸如 strong> 和 div> 之类的 html 元素作为实际文本包含在内（因此没有出现任何样式）。

还有其他人遇到过这个问题吗？我很确定我的设置与this

非常相似

这是描述我的观点的图片：

为了清楚起见，图片是用户将看到的其中一张卡片的放大屏幕截图（因此应该设置样式......在实际视图中不输出 html）

这是我的设置

actiontext.scss

@import "trix/dist/trix";

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}

应用程序.scss

@import "actiontext";

我的 new.html.erb 中的样式有效，但发布时未显示上述样式。

继续

我的表格， new.html.erb

<div class="page-content-area">
    <h1>Create a Blogpost</h1>
    <h2>Fill in the details below</h2>
        <%= simple_form_for [@blogposts] do |f| %>
            <%= f.input :blog_title,
                        required: true,
                        autofocus: true,
                        input_html: { autocomplete: "Blogpost Title" }%>
            <%= f.input :blog_sub_heading,
                        required: true,
                        autofocus: true,
                        input_html: { autocomplete: "Blogpost Sub Heading" }%>
            <%= f.input :blog_text,
                        as: :rich_text_area,
                        required: true,
                        autofocus: true,
                        input_html: { class: "text-area-blog", autocomplete: "Blog Text" }%>
            <%= f.input :photo,
                        autofocus: true,
                        as: :file %>
            <%= f.submit "CREATE", class: "btn btn-primary" %>
        <% end %>
</div>

应用程序.js

require("trix")
require("@rails/actiontext")

博文控制器

def new
    @blogposts = Blogpost.new
end

def create
    @blogposts = Blogpost.new(blogpost_params)
    @blogposts.user = current_user
    if @blogposts.save!
        redirect_to blogpost_path(@blogposts)
        else
        render 'new'
    end
end

private

    def blogpost_params
    params.require(:blogpost).permit(:user_id, :blog_title, :blog_sub_heading, :blog_text, :photo, :content)
    end

博文模型

class Blogpost < ApplicationRecord
    belongs_to :user
    has_rich_text :content
    
end

如果您需要我展示其他内容，请随时告诉我！

感谢您的宝贵时间！

【问题讨论】：

你的链接是about:blank#blocked

标签： ruby-on-rails rich-text-editor trix

【解决方案1】：

您如何在视图中呈现 blog_text 字段？通常，从用户内容呈现 HTML 是受限制的（以避免针对 XSS/等）。您可以使用 .html_safe 告诉 rails 不要转义 html 标签。见raw vs. html_safe vs. h to unescape html

【讨论】：

感谢您的资源！幸运的是，我发现了与我的模型有关的问题。 has_rich_text :content ，这应该是 blog_text。我要发布答案

【解决方案2】：

所以我意识到我的错误。

代替

class Blogpost < ApplicationRecord
    belongs_to :user
    has_rich_text :content
    
end

应该是

class Blogpost < ApplicationRecord
    belongs_to :user
    has_rich_text :blog_text
    
end

因为在我的应用程序中，我在架构和表单中将该列命名为“blog_text”。

我过于关注本教程，并没有将其与我的架构关联起来。

【讨论】：