时间戳

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

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

问题描述

我有一个奇怪的问题。

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

有没有其他人有这个问题？我很确定我的设置与此非常相似

这是一张图片来描述我的观点：

在此处输入图像描述

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

这是我的设置

动作文本.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

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

谢谢你的时间！

标签： ruby-on-railsrich-text-editortrix

解决方案

所以我意识到我的错误。

代替

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

我过于密切地关注本教程，并没有将其与我的模式关联起来。

推荐阅读