ruby-on-railsrich-text-editortrix

Trix Rich Text Editor works in new.html.erb but renders code in show.html.erb view instead of styled text(display in browser)


I am having a weird problem.

I installed Trix to my Rails app recently. It all went smoothly until I tried to publish a blogpost and found that html elements like strong> and div> were being included as actual text(and no styling occurring as a result).

Has anyone else had this problem? I am pretty sure my setup was pretty similar to this

Here's a picture to describe my view:

enter image description here

To be clear, the picture is a zoomed in screenshot of one of the cards that a user would see(and hence it should be styled ... not outputting html in that actual view)

Here is my setup

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";

The styling in my new.html.erb works but publishing is not showing styling as mentioned above.

Continuing

My form, 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")

blogpost controller

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

blogpost model

class Blogpost < ApplicationRecord
    belongs_to :user
    has_rich_text :content
    
end

If you need me to display anything else don't hesitate to let me know!

Thanks for your time!


Solution

  • So I realised my error.

    Instead of

    class Blogpost < ApplicationRecord
        belongs_to :user
        has_rich_text :content
        
    end
    

    It should be

    class Blogpost < ApplicationRecord
        belongs_to :user
        has_rich_text :blog_text
        
    end
    

    Because in my app, I have named that column in my schema and form as "blog_text".

    I followed the tutorial too closely and didn't contextualise it to my schema.