Q&A
前提・実現したいこと
Railsで作成している画面でAction Textを利用してリッチテキストエディタをフォームの入力欄に使用したいと思います
発生している問題・エラーメッセージ
Actiontextを導入対象のViewを表示させてみたところ、Actiontext(=trix)としての入力欄は表示されず、入力できない枠のみが表示されている状態です。（HTML上のタグ・クラスは正しく生成されているように見えるので、javascriptのmoduleが読み込めていないように見えます）
#表示されているページのソース(対象の部分のみ) <trix-editor class="form-control" input="trix_input_challenge" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename"></trix-editor>
該当のソースコード
実装するために以下の設定を行なっていました。
#challenge.rb (Modelに追記) class Challenge < ApplicationRecord has_rich_text :story end
#app/views/layouts/application.html.erb (javascript_pack_tag~を追記) <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= render 'layouts/shim' %> </head>
#challenges.controller (Controllerに追記) private def challenge_params params.require(:challenge).permit(:title, :story, :close_condition, :due_date, challenge_images_attributes: [:image]) end
#app/javascript/packs/application.js require("@rails/ujs").start() require("@rails/activestrage").start() require("channels") console.log('Hello World from Webpacker') require("rails-ujs").start() require("trix") require("@rails/actiontext")
#_form.html.erb (Action textを実装しようとしているform) <%= form_with model: @challenge do |f| %> <%= render 'shared/error_messages', object: f.object %> # ~省略 <div class="field"> <%= f.label :story %> <%= f.rich_text_area :story, class: 'form-control' %> </div> #~省略 <%= f.submit yield(:button_text), class: "btn btn-default" %> <% end %>
#gem list （参考） *** LOCAL GEMS *** actioncable (6.0.2.1) actionmailbox (6.0.2.1) actionmailer (6.0.2.1) actionpack (6.0.2.1) actiontext (6.0.2.1) actionview (6.0.2.1) activejob (6.0.2.1) activemodel (6.0.2.1) activerecord (6.0.2.1) activestorage (6.0.2.1) activesupport (6.0.2.1) addressable (2.7.0) ansi (1.5.0) autoprefixer-rails (9.7.4) awesome_nested_set (3.2.0) bcrypt (3.1.13) bindex (0.8.1) bootstrap-sass (3.4.1, 3.3.7) bootstrap-will_paginate (1.0.0) builder (3.2.4) bundler (2.1.4, 2.1.2) byebug (11.1.1) capybara (3.31.0) carrierwave (2.1.0) childprocess (3.0.0) coderay (1.1.2) coffee-rails (5.0.0) coffee-script (2.4.1) coffee-script-source (1.12.2) concurrent-ruby (1.1.6) crass (1.0.6) data-confirm-modal (1.6.2) erubi (1.9.0) execjs (2.7.0) faker (2.10.2) ffi (1.12.2) formatador (0.2.5) globalid (0.4.2) guard (2.16.1) guard-compat (1.2.1) guard-minitest (2.4.6) i18n (1.8.2) image_processing (1.10.3) jbuilder (2.10.0) jquery-rails (4.3.5) listen (3.2.1) loofah (2.4.0) lumberjack (1.2.4) mail (2.7.1) marcel (0.3.3) method_source (0.9.2) mimemagic (0.3.4) mini_magick (4.10.1) mini_mime (1.0.2) mini_portile2 (2.4.0) minitest (5.14.0) minitest-reporters (1.4.2) mysql2 (0.5.3, 0.5.2) nenv (0.3.0) nio4r (2.5.2) nokogiri (1.10.8) notiffany (0.1.3) pry (0.12.2) public_suffix (4.0.3) puma (3.12.2) rack (2.2.2) rack-proxy (0.6.5) rack-test (1.1.0) rails (6.0.2.1) rails-controller-testing (1.0.4) rails-dom-testing (2.0.3) rails-html-sanitizer (1.3.0) railties (6.0.2.1) rake (13.0.1) rb-fsevent (0.10.3) rb-inotify (0.10.1) regexp_parser (1.6.0) ruby-progressbar (1.10.1) ruby-vips (2.0.17) rubyzip (2.2.0) sass (3.7.4) sass-listen (4.0.0) sass-rails (6.0.0) sassc (2.2.1) sassc-rails (2.1.2) selenium-webdriver (3.142.7) shellany (0.0.1) sprockets (4.0.0) sprockets-rails (3.2.1) thor (1.0.1) thread_safe (0.3.6) tilt (2.0.10) trix (0.10.1) turbolinks (5.2.1) turbolinks-source (5.2.0) tzinfo (1.2.6) uglifier (4.2.0) web-console (4.0.1) webpacker (4.2.2) websocket-driver (0.7.1) websocket-extensions (0.1.4) will_paginate (3.2.1) xpath (3.2.0) zeitwerk (2.2.2)
試したこと
上記は既存のプロジェクトにAction textを導入しようとする過程で起きた事象でした。試しにrails newで新規プロジェクトを作成、scaffoldeを使用して簡単な画面を作りAciton textを導入してみましたが、こちらは難なく表示されました。
補足情報（FW/ツールのバージョンなど）
ruby 2.7.0p0, Rails 6.0.2.1です。
どなたかアドバイスいただけると大変助かります。
あなたの回答
tips
プレビュー
