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:
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!
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.