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

Question

我有一个奇怪的问题。

我最近在我的 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;
    }
  }
}

application.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>

application.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

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

感谢您的宝贵时间！

Answer 1

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

Answer 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”。

我过于严格地遵循了教程，没有将它与我的架构联系起来。

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)

ruby-on-rails

rich-text-editor

trix