Rails 6 ActionText rich_text_area works normally, does not appear when rendered in a layout
Asked Answered
P

1

1

I'm rendering a form that utilizes the ActionText input rich_text_area, which is the Rails implementation of the Trix WYSIWYG rich text editor. It's been working fine until I started refactoring my views to use a layout, where the form content can yield different forms. The form renders fine except for the rich_text_areas, which both disappear. Removing the code required to make this a layout returns it back to normal. My code is below.

I'm rendering a form as a partial with the following code:

<%= stylesheet_link_tag "form" %>
<%= form_with model: @family, class: "form-group" do |f| %>

  <%= label_tag(:banner_image, 'Select a Banner Image')%>
  <%= f.file_field :banner_image%>
  <br>
  <br>

  <%= label_tag(:zh_family_name, 'Chinese Family Name') %>
  <%= f.text_field :zh_family_name %>
  <br>
  <br>
  <%= label_tag(:en_family_name, 'English Family Name') %>
  <%= f.text_field :en_family_name %>
  <br>
  <br>
  <%= label_tag(:en_summary, 'Summary') %>
  <%= f.text_field :en_summary %>
  <br>
  <br>
  <%= label_tag(:zh_summary, 'Summary Chinese') %>
  <%= f.text_field :zh_summary %>
  <br>
  <br>

  <%= label_tag(:en_content, 'Content') %>  
  <%= f.rich_text_area :en_content_rt %>
  <br>
  <br>

  <%= label_tag(:zh_content, '内容') %>
  <%= f.rich_text_area :zh_content_rt %>
  <br>
  <br>

  <%= label_tag(:service_id, 'Select a related service') %>
  <%= f.collection_select(:service_id, Service.all, :id, :en_title) %>
  <br>
  <br>
  <%= f.submit %>
<% end %>

It works fine and the rich text areas are visible and can be used when this form is loaded in to the edit.html.erb file as a partial like so:

<%= render "partials/family_form" %>

But I'd like to render it as part of a layout called 'editor', thus I change the edit.html.erb to this:

<% content_for :form do %>
  <h1>Edit the <em><%= @family.en_family_name %></em> Testimonial </h1>

  <%= render "partials/family_form" %>
<% end %>

add render layout: 'editor' to the edit function in the controller, and add a layout that looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <%= stylesheet_link_tag "editor" %>
  <%= yield :head %>
</head>
<body>
  <div class="main-container">
    <div class="sidenav">
      <%= render "partials/sidenav" %>
    </div>
    <div class="content">
      <%= yield :form %>
    </div>
  </div>
</body>
</html>

I think I've narrowed it down to the render layout: 'editor' code being the source of the problem, since directly pasting the form code into the editor.html.erb layout file produces the same error: everything renders fine except for the rich text areas.

I haven't seen this issue reported on the Trix repo and have tried manually adding require 'action_text' and the ActionText helper to the relevant controller, to no avail. Any help would be greatly appreciated, thanks.

Purposeless answered 27/11, 2019 at 12:15 Comment(1)
Maybe your new layout is missing the javascript: <%= javascript_include_tag "application" %>Rondarondeau
N
6

Did you setup your action_text with with Webpacker or with assets pipeline? If you set it up with Webpacker you may have to add <%= javascript_pack_tag 'application' %> If you set it up with assets pipeline then as @MurifoX mentioned, you may need the <%= javascript_include_tag 'application' %>.

Nw answered 27/11, 2019 at 13:26 Comment(1)
Thank you, the <%= javascript_pack_tag 'application' %> was what was missing in the layout!Purposeless

© 2022 - 2024 — McMap. All rights reserved.