Я пытаюсь использовать ActionText в моем приложении на Rails 6. Я могу создавать BLOB-объекты, но:
- В моем текстовом редакторе нет стилей по умолчанию
2. My «вложения изображений» выглядят немного странно при составлении сообщения ... но может это нормально?
Мои капли не отображаются с изображениями / вложениями (только стили текста)
Я следовал инструкциям на https://edgeguides.rubyonrails.org/action_text_overview.html.
Мое приложение. Файл 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.s css выглядит следующим образом:
//
// 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;
}
}
}
Мое приложение. Файл s css выглядит следующим образом:
/*
* 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