Rails: 如何在Rails 5.2.1 中实现Action Text？

Question

我在 Rails 5.2.1 应用程序中实施 Action Text gem 时遇到困难。

我按照安装指南进行操作，富文本编辑器没有出现在我的 _form 视图中。

然后我意识到它需要 Rails6 以及 webpacker 和 active storage.更改我的 gemfile 的 Rails 版本和运行 rails upgrade 没有用，所以我添加了 webpacker 和 active storage gems 并将其与我的捆绑在一起当前 5.2.1 版本。那也没用。

我真的很想在我的应用程序中有一个富文本编辑器。它不一定是 Trix 编辑器，但由于它将是 v6 的原生版本，我认为这是显而易见的选择。

我的源代码参考

GitHub: https://github.com/Curting/mydanceplan
Heroku：https://mydanceplan.herokuapp.com/

Answer 1

我有部分答案要告诉你！我想使用 Trix、Rails 5.2.2 和 Webpacker，但找不到明确的答案。 trix gem 不起作用，因为我根本不使用资产管道。（我也使用 Turbolinks 和 Stimulus，到目前为止，它与那些一起工作得很好。）

我使用以下方法将解决方案串在一起：

trix node package
自定义表单标签助手，派生自this Stack post

我现在可以使用如下所示的表单助手（使用 Slim 模板语言）：

= f.trix :personal_notes, class: 'some-css-class'

为了到达那里，我做了以下事情：

yarn add trix
在我的 Javascript 包中，import 'trix';
在我的 CSS 包中，@import '~trix/dist/trix';
然后我创建了表单助手。这是它的样子：

在 app/helpers/application_helper.rb 中，我添加了新的表单助手，基于上面链接的 Stack post。我的文件现在看起来像这样：

module ApplicationHelper
    # ...

    class ActionView::Helpers::FormBuilder
        # include ActionView::Helpers::TagHelper # I didn't need this.
        include ActionView::Helpers::FormTagHelper
        include ActionView::Helpers::FormOptionsHelper
        # include ActionView::Helpers::CaptureHelper  # I didn't need this.
        # include ActionView::Helpers::AssetTagHelper  # I didn't need this.

        # since these tag helpers just return strings, it is easy to make a pretty 
        # powerful helper.  It is probably possible to use existing Rails form 
        # helpers to aid this as well.
        def trix(method, options = {})
          value = (@object[method].empty?) ? '' : "value='#{@object[method]}'" 
          return "<input id='#{field_id(method)}' type='hidden' name='#{field_name(method)}' #{value}><trix-editor input='#{field_id(method)}' class='trix-content #{options[:class]}'></trix-editor>".html_safe
        end

        def field_name(label,index=nil)
          return @object_name + "[#{label}]"
        end

        def field_id(label,index=nil)
          return @object_name + "_#{label}"
        end

    end
end

重启Rails。似乎对我有用。

Answer 2

完美的选择，使用 rails 5.2.3 在我的新应用程序上进行了测试。请不要操作文本要求 ruby 2.5.3 了。首先：添加 webpacker

您可以在设置新的 Rails 5.1+ 应用程序时使用新的 --webpack 选项添加 Webpacker：

可用 Rails 5.1+

rails new myapp --webpack

或者将它添加到你的 Gemfile:

宝石文件

gem 'webpacker', '~> 4.x'

或者如果你更喜欢使用 master

gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
yarn add https://github.com/rails/webpacker.git

现在使用图像魔法将 Actiontext 添加到您的 gem 文件中：

gem'actiontext',github:'kobaltz/actiontext',branch:'archive',require:'action_text'
gem 'image_processing'

最后，运行安装Webpacker：

bundle
bundle exec rails webpacker:install

rails action_text:install
rails db:migrate
brew install imagemagick vips

将此添加到标题部分的 view/layout/application

#layouts/application.html.erb
<%= javascript_pack_tag 'application' %>

在您的模型中，它可能是一篇文章或您模型中的任何东西

class Article < ApplicationRecord
  has_rich_text :content
end

在你的控制器中

 #controllers/articles_controller.rb
    def article_params
      params.require(:article).permit(:name, :content)
    end

在你的表单中

#_form.html.erb
<div class="field">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>

终于在您的视图中显示内容了；

<h1><%= @article.name %></h1>
<p><%= @article.content %></p>

可选：要修复 "unmet peer dependency" 警告，

yarn upgrade

您可以在此处观看完整视频： https://www.driftingruby.com/episodes/using-action-text-in-a-rails-5-2-application

Rails: 如何在Rails 5.2.1 中实现Action Text？

Rails: How to implement Action Text in Rails 5.2.1?

ruby

wysiwyg

ruby-on-rails

rich-text-editor

trix

可用 Rails 5.1+

宝石文件

或者如果你更喜欢使用 master