Rails ActionText не отображает стили для поля ввода текста и загруженных вложений

Question

Rails ActionText не отображает стили для поля ввода текста и загруженных вложений

Я пытаюсь использовать ActionText в своем приложении Rails 6. Я могу создавать капли, но:

В моем текстовом редакторе нет стилей по умолчанию

2. Мои "прикрепленные изображения" выглядят немного странно при составлении сообщения... но, может быть, это нормально?

Мои капли не отображаются с изображениями / вложениями (только стили текста)

Я выполнил инструкции на https://edgeguides.rubyonrails.org/action_text_overview.html.

Мой файл application.js выглядит так:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

//= require jquery3
//= require popper
//= require bootstrap-sprockets

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

Мой файл actiontext.scss выглядит так:

//
// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
// inclusion directly in any other asset bundle and remove this file.
//
//= require trix/dist/trix

// We need to override trix.css’s image gallery styles to accommodate the
// <action-text-attachment> element we wrap around attachments. Otherwise,
// images in galleries will be squished by the max-width: 33%; rule.

.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 выглядит так:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */

@import "users";
@import "tlks";
@import "spkrs";
@import "shared";
@import "./actiontext.scss";
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
@import "components/index";

Мой рендеринг соответствующих областей представлений выглядит так:

<% @tlk.msgs.each do |msg| %>
  <p class="name-spkr-<%= msg.spkr.id %>"><%= msg.spkr.name %></p>
  <p><%= msg.content %></p>
<% end %>

<% @user_spkrs.each do |spkr| %>
  <% if spkr.hide == false %>
    <%= form_with model: @msg do |f| %>
      <div class="field">
        <%= f.label :content %>
        <%= f.rich_text_area :content %>
      </div>
      <%= f.hidden_field :tlk_id, :value => @tlk.id %>
      <%= f.hidden_field :spkr_id, :value => spkr.id %>
      <%= f.submit %>
    <% end %>
  <% end %>
<% end %>

Я не уверен, что нужно изменить, чтобы стили присутствовали как для редактора, так и для изображений, которые загружаются для правильного рендеринга.

Спасибо за любую информацию.

Изменить в отношении журналов при рендеринге страницы:

MiniMagick::Error (You must have ImageMagick or GraphicsMagick installed):

mini_magick (4.10.1) lib/mini_magick/configuration.rb:147:in `cli'
mini_magick (4.10.1) lib/mini_magick.rb:38:in `imagemagick7?'
mini_magick (4.10.1) lib/mini_magick/tool.rb:133:in `executable'
mini_magick (4.10.1) lib/mini_magick/tool.rb:108:in `command'
mini_magick (4.10.1) lib/mini_magick/tool.rb:90:in `call'
image_processing (1.10.3) lib/image_processing/mini_magick.rb:56:in `save_image'
image_processing (1.10.3) lib/image_processing/processor.rb:23:in `call'
image_processing (1.10.3) lib/image_processing/pipeline.rb:50:in `call_processor'
image_processing (1.10.3) lib/image_processing/pipeline.rb:28:in `block in call'
image_processing (1.10.3) lib/image_processing/pipeline.rb:64:in `create_tempfile'
image_processing (1.10.3) lib/image_processing/pipeline.rb:27:in `call'
image_processing (1.10.3) lib/image_processing/builder.rb:13:in `call!'
image_processing (1.10.3) lib/image_processing/chainable.rb:65:in `call'
rails (02ed03172b23) activestorage/lib/active_storage/transformers/image_processing_transformer.rb:15:in `process'
rails (02ed03172b23) activestorage/lib/active_storage/transformers/transformer.rb:25:in `transform'
rails (02ed03172b23) activestorage/app/models/active_storage/variation.rb:52:in `block in transform'
rails (02ed03172b23) activesupport/lib/active_support/notifications.rb:182:in `instrument'
rails (02ed03172b23) activestorage/app/models/active_storage/variation.rb:51:in `transform'
rails (02ed03172b23) activestorage/app/models/active_storage/variant.rb:105:in `transform'
rails (02ed03172b23) activestorage/app/models/active_storage/variant.rb:100:in `block in process'
rails (02ed03172b23) activestorage/lib/active_storage/downloader.rb:15:in `block in open'
rails (02ed03172b23) activestorage/lib/active_storage/downloader.rb:24:in `open_tempfile'
rails (02ed03172b23) activestorage/lib/active_storage/downloader.rb:12:in `open'
rails (02ed03172b23) activestorage/lib/active_storage/service.rb:86:in `open'
rails (02ed03172b23) activestorage/app/models/active_storage/blob.rb:219:in `open'
rails (02ed03172b23) activestorage/app/models/active_storage/variant.rb:99:in `process'
rails (02ed03172b23) activestorage/app/models/active_storage/variant.rb:67:in `processed'
rails (02ed03172b23) activestorage/app/controllers/active_storage/representations_controller.rb:12:in `show'
rails (02ed03172b23) actionpack/lib/action_controller/metal/basic_implicit_render.rb:6:in `send_action'
rails (02ed03172b23) actionpack/lib/abstract_controller/base.rb:195:in `process_action'
rails (02ed03172b23) actionpack/lib/action_controller/metal/rendering.rb:30:in `process_action'
rails (02ed03172b23) actionpack/lib/abstract_controller/callbacks.rb:42:in `block in process_action'
rails (02ed03172b23) activesupport/lib/active_support/callbacks.rb:135:in `run_callbacks'
rails (02ed03172b23) actionpack/lib/abstract_controller/callbacks.rb:41:in `process_action'
rails (02ed03172b23) actionpack/lib/action_controller/metal/rescue.rb:22:in `process_action'
rails (02ed03172b23) actionpack/lib/action_controller/metal/instrumentation.rb:33:in `block in process_action'
rails (02ed03172b23) activesupport/lib/active_support/notifications.rb:180:in `block in instrument'
rails (02ed03172b23) activesupport/lib/active_support/notifications/instrumenter.rb:24:in `instrument'
rails (02ed03172b23) activesupport/lib/active_support/notifications.rb:180:in `instrument'
rails (02ed03172b23) actionpack/lib/action_controller/metal/instrumentation.rb:32:in `process_action'
rails (02ed03172b23) actionpack/lib/action_controller/metal/params_wrapper.rb:245:in `process_action'
rails (02ed03172b23) activerecord/lib/active_record/railties/controller_runtime.rb:27:in `process_action'
rails (02ed03172b23) actionpack/lib/abstract_controller/base.rb:136:in `process'
rails (02ed03172b23) actionview/lib/action_view/rendering.rb:39:in `process'
rails (02ed03172b23) actionpack/lib/action_controller/metal.rb:192:in `dispatch'
rails (02ed03172b23) actionpack/lib/action_controller/metal.rb:256:in `dispatch'
rails (02ed03172b23) actionpack/lib/action_dispatch/routing/route_set.rb:50:in `dispatch'
rails (02ed03172b23) actionpack/lib/action_dispatch/routing/route_set.rb:33:in `serve'
rails (02ed03172b23) actionpack/lib/action_dispatch/journey/router.rb:49:in `block in serve'
rails (02ed03172b23) actionpack/lib/action_dispatch/journey/router.rb:32:in `each'
rails (02ed03172b23) actionpack/lib/action_dispatch/journey/router.rb:32:in `serve'
rails (02ed03172b23) actionpack/lib/action_dispatch/routing/route_set.rb:834:in `call'
warden (1.2.8) lib/warden/manager.rb:36:in `block in call'
warden (1.2.8) lib/warden/manager.rb:34:in `catch'
warden (1.2.8) lib/warden/manager.rb:34:in `call'
rack (2.0.8) lib/rack/tempfile_reaper.rb:15:in `call'
rack (2.0.8) lib/rack/etag.rb:25:in `call'
rack (2.0.8) lib/rack/conditional_get.rb:25:in `call'
rack (2.0.8) lib/rack/head.rb:12:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/http/content_security_policy.rb:18:in `call'
rack (2.0.8) lib/rack/session/abstract/id.rb:259:in `context'
rack (2.0.8) lib/rack/session/abstract/id.rb:253:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/cookies.rb:647:in `call'
rails (02ed03172b23) activerecord/lib/active_record/migration.rb:567:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/callbacks.rb:27:in `block in call'
rails (02ed03172b23) activesupport/lib/active_support/callbacks.rb:101:in `run_callbacks'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/callbacks.rb:26:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/executor.rb:14:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/actionable_exceptions.rb:17:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/debug_exceptions.rb:32:in `call'
web-console (be84e6471c33) lib/web_console/middleware.rb:132:in `call_app'
web-console (be84e6471c33) lib/web_console/middleware.rb:28:in `block in call'
web-console (be84e6471c33) lib/web_console/middleware.rb:17:in `catch'
web-console (be84e6471c33) lib/web_console/middleware.rb:17:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
rails (02ed03172b23) railties/lib/rails/rack/logger.rb:37:in `call_app'
rails (02ed03172b23) railties/lib/rails/rack/logger.rb:26:in `block in call'
rails (02ed03172b23) activesupport/lib/active_support/tagged_logging.rb:80:in `block in tagged'
rails (02ed03172b23) activesupport/lib/active_support/tagged_logging.rb:28:in `tagged'
rails (02ed03172b23) activesupport/lib/active_support/tagged_logging.rb:80:in `tagged'
rails (02ed03172b23) railties/lib/rails/rack/logger.rb:26:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/request_id.rb:27:in `call'
rack (2.0.8) lib/rack/method_override.rb:22:in `call'
rack (2.0.8) lib/rack/runtime.rb:22:in `call'
rails (02ed03172b23) activesupport/lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/executor.rb:14:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/static.rb:126:in `call'
rack (2.0.8) lib/rack/sendfile.rb:111:in `call'
rails (02ed03172b23) actionpack/lib/action_dispatch/middleware/host_authorization.rb:82:in `call'
webpacker (c7292e9a1e15) lib/webpacker/dev_server_proxy.rb:23:in `perform_request'
rack-proxy (0.6.5) lib/rack/proxy.rb:57:in `call'
rails (02ed03172b23) railties/lib/rails/engine.rb:526:in `call'
puma (4.3.1) lib/puma/configuration.rb:228:in `call'
puma (4.3.1) lib/puma/server.rb:681:in `handle_request'
puma (4.3.1) lib/puma/server.rb:472:in `process_client'
puma (4.3.1) lib/puma/server.rb:328:in `block in run'
puma (4.3.1) lib/puma/thread_pool.rb:134:in `block in spawn_thread'

ОБНОВИТЬ

Применение исправления Бена Треверна, приведенного ниже, хорошо работало для формы ввода форматированного текста.

Для решения изображений мне пришлось добавить:

gem 'mini_magick

и запустите:

$brew install imagemagick

2

ruby-on-rails ruby-on-rails-6 actiontext

Источник

user1395961 15 янв '20 в 18:25

1 ответ

Другие вопросы по тегам ruby-on-rails ruby-on-rails-6 actiontext

user887947 15 янв '20 в 18:58 2020-01-15 18:58 · Answer 1 · 2020-01-15 18:58

У меня аналогичная установка и была аналогичная проблема. В настоящее время у меня есть файл application.scss, который начинается с:

//= require actiontext
...

что устраняет проблему.

5

Источник

user887947 15 янв '20 в 18:58