我正在尝试在我的 Rails 6 应用程序中使用 ActionText。我能够创建 blob，但是：
- 我的文本编辑器没有任何默认样式
2. 撰写邮件时，我的“图片附件”看起来有点奇怪……但也许这很正常？
- 我的 blob 不使用图像/附件（仅文本样式）呈现
我按照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'
更新
下面应用 Ben Trewern 的修复对富文本输入表单效果很好。
为了解决我必须添加的图像：
gem 'mini_magick
并运行：
$brew install imagemagick