in Hacking

ActionText rendering issues and Spree 4

ActionText is a nice replacement for CKEditor/TinyMCE for content editing. It's embedded in the Rails core, works directly with ActiveStorage, and integrates very nicely.

Last week, I tried ActionText for the first time in the backend of my Spree store. To make this work I had to make several adjustments.

First I followed the default instructions of ActionText:

I had to make webpacker active in the Spree backend. So I've included the javascript pack. (Is used content_for :head in mij CMS plugin view)

<% content_for :head do %>
    <%= javascript_pack_tag('application', 'data-turbolinks-track': 'reload') %>
<% end %>

And activate the css in the spree shop stylesheets/spree/backlend/all.css

 *= require spree/backend
 *= require ./../../actiontext
 *= require_self
 *= require_tree .

At this point the ActionText editing was operational.

BUT, rendering didn't work as expected.
Images weren't shown when rendering the actiontext.

<%= cms.my_action_text %>

After a lot of debugging and playing around with /activestorage/blobs/_blob.html.erb, I discovered the IMG tags were simply stripped!

I discovered the allowed tags were extremely limited. The IMG tag wasn't included??
To solve it, I added severy other allowed tags in a rails initializer:

  # Workaround for issue with ActiveText... Somehow the Rails Sanetizer list is very restricted!!
  ActionText::ContentHelper.allowed_tags = (ActionText::ContentHelper.allowed_tags +
    ["strong", "em", "b", "i", "p", "code", "pre", "tt", "samp", "kbd", "var", "sub", "sup", "dfn", "cite",
      "big", "small", "address", "hr", "br", "div", "span", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol",
      "li", "dl", "dt", "dd", "abbr", "acronym", "a", "img", "blockquote", "del", "ins"]).uniq

  ActionText::ContentHelper.allowed_attributes = (ActionText::ContentHelper.allowed_attributes +
    ["href", "src", "width", "height", "alt", "cite", "datetime", "title", "class", "name", "xml:lang", "abbr"]).uniq