Rails:如何在 Rails 5.2.1 中实现 Action Text? [英] Rails: How to implement Action Text in Rails 5.2.1?

查看:24
本文介绍了Rails:如何在 Rails 5.2.1 中实现 Action Text?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在将 Action Text gem 实施到我的 Rails 5.2 时遇到了困难.1 应用程序.

我按照安装指南操作,富文本编辑器不会出现在我的 _form 视图中.

然后我意识到它需要带有 webpacker主动存储Rails 6.更改我的 gemfile 的 Rails 版本并运行 rails upgrade 不起作用,所以我添加了 webpacker 和 active storage gems 并将其与我当前的 5.2.1 版本捆绑在一起.那也没有用.

我真的很想在我的应用中使用富文本编辑器.它不一定是 Trix 编辑器,但由于它是 v6 的原生编辑器,我认为这是显而易见的选择.

我的源代码参考

解决方案

完美的选择,在我使用 Rails 5.2.3 的新应用程序上进行了测试.请不要操作文本需要 ruby​​ 2.5.3 以上.首先:添加 webpacker

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

可用的 Rails 5.1+

rails new myapp --webpack

或者将其添加到您的 Gemfile:

Gemfile

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

或者,如果您更喜欢使用 master

gem 'webpacker', git: 'https://github.com/rails/webpacker.git'纱线添加 https://github.com/rails/webpacker.git

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

gem'actiontext',github:'kobaltz/actiontext',branch:'archive',require:'action_text'宝石图像处理"

最后,运行以下命令安装 Webpacker:

包bundle exec rails webpacker:installrails action_text:安装导轨数据库:迁移brew 安装 imagemagick vips

将此添加到您的视图/布局/应用程序的 head 部分

#layouts/application.html.erb<%= javascript_pack_tag '应用程序' %>

在您的模型中,它可能是一篇文章或您模型中的任何内容

类文章<申请记录has_rich_text :内容结尾

在你的控制器中

 #controllers/articles_controller.rbdef article_paramsparams.require(:article).permit(:name,:content)结尾

在你的表单中

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

最终在您的视图中显示内容;

<%= @article.name %>

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

可选:要修复未满足的对等依赖项"警告,

纱线升级

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

I'm experiencing difficulties in implementing the Action Text gem to my Rails 5.2.1 application.

I followed the installation guide and the rich text editor wouldn't show up in my _form view.

I then realised that it requires Rails 6 with webpacker and active storage. Changing my gemfile's Rails version and running rails upgrade didn't work, so I added the webpacker and active storage gems and bundled it with my current 5.2.1 version. That didn't work either.

I'd really like to have a Rich Text Editor in my app. It is not a must that it is the Trix editor, but since it will be native as of v6 I thought it was the obvious choice.

References of my source code

解决方案

The perfect choice ,tested on my new application using rails 5.2.3 . please not action text require ruby 2.5.3 up. first : Add webpacker

You can either add Webpacker during setup of a new Rails 5.1+ application using new --webpack option:

Available Rails 5.1+

rails new myapp --webpack

Or add it to your Gemfile:

Gemfile

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

OR if you prefer to use master

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

Now add Actiontext to your gem file with image magic:

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

Finally, run the following to install Webpacker:

bundle
bundle exec rails webpacker:install

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

add this to your view/layout/application in the head section

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

In your model , it may be an article or what ever in your model

class Article < ApplicationRecord
  has_rich_text :content
end

in your controller

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

in your form

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

finaly to display the content in your view;

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

Optional: To fix "unmet peer dependency" warnings,

yarn upgrade

you can watch the full video here: https://www.driftingruby.com/episodes/using-action-text-in-a-rails-5-2-application

这篇关于Rails:如何在 Rails 5.2.1 中实现 Action Text?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆