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

Posted 2023-05-09

【中文标题】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)

【发布时间】：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

【参考方案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”。

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