Skip to content
Mitsuhiro Shibuya edited this page Jun 2, 2019 · 3 revisions

Rails 6 is shipped with a new rich text editor, called ActionText. RailsAdmin can make use of it in two ways.

Easy-to-use setup

Follow the official documentation to configure ActionText.

$ rails action_text:install
class Message < ApplicationRecord
  has_rich_text :content
end

That's it, RailsAdmin will show the rich text editor in the edit form of Message model.

Please note that this setup makes use of CDN-delivered assets for simplicity, hence it lacks some features like uploading attachments.

Full-featured setup using Webpacker

First, you have to setup Webpacker and ActionText correctly. Watch out those issues if you're an early adopter:

Create app/javascript/packs/actiontext.js with following content:

require("trix")
require("@rails/actiontext")

Configure your rich text field to pick up Webpacker-built asset:

  config.model 'Message' do
    field :content do
      js_location { bindings[:view].asset_pack_path 'actiontext.js' }
    end
  end

ActiveStorage Blob view generated by ActionText shows wrong image URL when used inside engine's path, so apply this patch to app/views/active_storage/blobs/_blob.html.erb:

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
   <% if blob.representable? %>
-    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
+    <%= image_tag polymorphic_url(blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]), script_name: nil) %>
   <% end %>

   <figcaption class="attachment__caption">

Drag and drop an image to the editor and you can now see the image uploaded and stored into ActiveStorage.

More here

Clone this wiki locally