升级到 ActionText - 编辑器无法正常工作/显示

Posted 2023-03-07

【中文标题】升级到 ActionText - 编辑器无法正常工作/显示

【英文标题】：Upgrading to ActionText - editor not working/appearing properly

【发布时间】：2020-03-15 06:48:55

【问题描述】：

我正在尝试在已升级到 Rails 6.0.1 的应用上实现 ActionText。

我运行rails action_text:install 并迁移，然后将has_rich_text :content 添加到我的comment 模型中。然后在表格中我将f.text_area :content 切换为f.rich_text_area :content。

但是，出现的编辑器看起来像这样，并且无法附加文件。我做错了什么？

【参考方案1】：

升级后我缺少的一个部分是：

<%= javascript_pack_tag 'application' %>

我的放在app/views/layouts/application.html.erb。只要确保它包含在某处即可。

不是这样，请检查以确保包含 actiontext 的样式表。

【参考方案2】：

要解决富文本区域不显示的问题，如果您使用 Webpack 加载资产，您可能需要添加 ，如果使用资产，则可能需要添加 管道（有人在我的类似 question 中很有帮助地推荐）。

但我不确定这是否会修复工具栏按钮样式，因为我仍然有这个问题。如果我找到解决办法，我会回到这个问题。

编辑我已通过将trix editor stylesheet 的全部内容添加到 actiontext.scss 文件然后使用 注意：这样做你还必须在 config/initializers/assets.rb 行的 assets 预编译行中定义它：

Rails.application.config.assets.precompile += %w( sidenav.css editor.css form.css actiontext.css )

【参考方案3】：

从 Rails 5.2 升级到 Rails 6.0 后，我遇到了类似的问题。请在您的 application.scss 中添加以下行：

@import 'trix/dist/trix.css'

@import 'actiontext'

查看这些博客了解更多详情：

https://blog.rubynetti.it/i/how-to-add-action-text-in-rails-6:

https://blog.francium.tech/action-text-in-rails-6-a-brief-intro-dd33fb412eb5

希望对你有帮助。

【参考方案4】：

你可以参考这个：https://github.com/rails/webpacker/issues/2059

基本上构建链是这样工作的：

(if extract_css == true) -> application stylesheet -> MiniCssExtractPlugin -> application.css -> stylesheet_pack_tag 'application'

(if extract_css == false) -> application stylesheet -> style-loader -> application.js (loads css in head)

因此，如果您想使用 stylesheet_pack_tag，那么以下步骤可能会对您有所帮助：

设置extract_css: true 用于开发webpacker.yml @import "trix/dist/trix"; 转为 javascript/stylesheets/application.scss import "../stylesheets/application"; 进入 javascript/stylesheets/application.js <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 转为 application.html.erb 运行./bin/webpack && rails s

【参考方案5】：

我不确定为什么通过添加解决了这个问题

@import "trix/dist/trix.css";

到 application.scss 因为我完全怀疑 actiontext.scss 第 6 行

//= require trix/dist/trix

也是一样的，但不知道为什么它不拉 css。

解决方案 - 将 @import "trix/dist/trix.css"; 添加到 application.scss。

【参考方案6】：

导轨 6.1 打包程序 带有 JIT 的 Tailwind 2.1

我将 @import 'trix/dist/trix.css'; 添加到 application.scss 以使 Trix 按预期工作。

【讨论】：

#same。使用 Webpacker 和 Bootstrap 5.0.0-beta3 将 ActionText 安装到 rails 6.1 应用程序，“actiontext.css”导入不是必需的。我只需要导入'trix/dist/trix.css'；到 application.scss 以更正控制栏格式。