升级到ActionText-编辑器无法正常工作/外观

Question

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

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

但是，出现的编辑器如下所示，无法附加文件。我在做什么错了？

Answer 1

从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

希望有帮助。

Answer 2

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

<%= javascript_pack_tag 'application' %>

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

不是，请检查以确保也包含动作文本的样式表。

Answer 3

您可以参考：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，那么以下步骤可能会为您提供帮助：

1. 设置extract_css: true以便在webpacker.yml中进行开发
2. @import "trix/dist/trix";改成javascript/stylesheets/application.scss
3. import "../stylesheets/application";成 javascript/stylesheets/application.js
4. <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>改成application.html.erb
5. 运行./bin/webpack && rails s

Answer 4

要解决富文本区域不显示的问题，如果您正在使用Webpack加载资产，则可能需要添加<％= javascript_pack_tag“ application”％>，如果使用资产则需要添加<％= javascript_include_tag“ application”％>管道（正如我在类似的question中建议的那样）。

但是我不确定这是否可以解决工具栏按钮的样式，因为我仍然遇到该问题。如果找到解决方法，请回到此页面。

编辑我已通过将trix editor stylesheet的全部内容添加到actiontext.scss文件中，然后使用<％= stylesheet_link_tag将样式表显式拉入布局文件中，解决了样式损坏的问题。 actiontext'％>注意：这样，您还必须在config / initializers / assets.rb行中的资产预编译行中定义它：

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

Answer 5

我不确定为什么通过添加来解决

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

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

//= require trix/dist/trix

也执行相同的操作，但不确定为什么不拉CSS。

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

Answer 6

Rails 6.1 打包机 带有 JIT 的 Tailwind 2.1

我将 left: 200px; 添加到 position: relative 以使 Trix 按预期工作。