de Arun Mathew Kurian

O privire rapidă asupra textului de acțiune pentru Rails 6.0

Șine 6.0 este aproape aici. Versiunea stabilă va fi lansată pe 30 aprilie. Rails 6.0 beta1 a fost lansat pe 15 ianuarie. Deoarece lansările Rails sunt întotdeauna, Rails 6.0 este, de asemenea, plin de acțiune. Există două cadre majore nou introduse, Căsuță poștală acțiune și Textul acțiunii. În această postare, să aruncăm o privire rapidă asupra textului de acțiune folosindu-l într-o aplicație mică.

O privire rapida asupra textului de actiune pentru Rails 60
curtoazie: wikipedia

Textul acțiunii

Textul de acțiune ne permite să aducem conținut text bogat și editare la Rails. Aceasta înseamnă că putem efectua operațiuni precum formatarea textului, încorporarea imaginilor, formatarea linkurilor, adăugarea listelor și a altor caracteristici de tip editor într-un câmp de text.

Acest lucru se face prin includerea Editor Trix în cadru. Conținutul RichText generat de editorul Trix este salvat în propriul model RichText asociat cu orice model existent de înregistrare activă din aplicație. Toate imaginile încorporate sau alte atașamente sunt stocate automat folosind Stocare activă.

Să începem să construim aplicația noastră Rails, care va fi o aplicație pentru bloggeri. Aplicația este creată în Rails 6.0, deci versiunea ruby ​​trebuie să fie> 2,5.

În tipul terminalului

ad-banner
rails new blog --edge

Steagul – edge preia cea mai recentă versiune a șinelor sau versiunea edge a șinelor.

Textul de acțiune se așteaptă să fie instalat pachetul web și ActiveStorage. Stocarea activă este deja prezentă în aplicația Rails. Deci avem nevoie

gem “image_processing”, “~> 1.2” #uncomment from Gemfilegem ‘webpacker’

în fișierul de bijuterii.

Acum fugi

bundle install.

Apoi, trebuie să creăm un config / webpacker.yml:

bundle exec rails webpacker:install

Acum să ne pornim serverul Rails.

1611415627 458 O privire rapida asupra textului de actiune pentru Rails 60

Super, hai să ne construim rapid aplicația. Aplicația va avea un singur articol de model.

Să creăm un controler pentru articole:

rails g controller Articles index new create show edit update destroy — no-helper — no-test-frameworks

Și apoi configurați rutele noastre:

Rails.application.routes.draw do resources :articlesend

Apoi, trebuie să ne creăm modelul. Modelul articolelor noastre va avea două câmpuri: acestea sunt titlu și text. textul trebuie să fie câmpul care acceptă formatul de text îmbogățit. Deci, în migrare, trebuie să adăugăm doar câmpul de titlu. Câmpul de text va fi gestionat de ActionText.

Să generăm modelul

rails g model Articles title:string — no-test-framework

și executați migrațiile:

rails db:migrate

Acum permiteți-ne să adăugăm partea ActionText. Pentru prima alergare

rails action_text:install

Aceasta va adăuga toate dependențele cerute de textul acțiunii. În special, acest lucru va adăuga un fișier nou javascript / packs / application.js și două migrații de stocare acțiune.

1611415627 263 O privire rapida asupra textului de actiune pentru Rails 60

Rulați din nou migrările folosind

rails db:migrate
1611415628 101 O privire rapida asupra textului de actiune pentru Rails 60

Acum putem adăuga partea de text a modelului nostru. Mergi la app / models / article.rb și adăugați următoarea linie

has_rich_text :text

textul este numele câmpului pe care îl furnizăm. Poate fi ceva de genul corp sau conținut etc.

Acum modelul nostru devine

class Article < ApplicationRecord has_rich_text :textend

Înainte de a ne construi formularul, să creăm logica controlerului pentru crearea articolelor:

class ArticlesController < ApplicationController  def create   @article = Article.new(article_params)   @article.save   redirect_to @article end
 private def article_params   params.require(:article).permit(:title, :text) end
end

Acum putem crea formularul pentru blog. În app / views / articles / new.rb adăugați următorul cod formular:

<%= form_with scope: :article, url: articles_path, local: true do |form| %>
<p>    <%= form.label :title %><br>    <%= form.text_field :title %>  </p>   <p>    <%= form.label :text %><br>    <%= form.rich_text_area :text %>  </p>   <p>    <%= form.submit %>  </p><% end %>

Observați că pentru câmpul text pe care îl folosim form.rich_text_area care este furnizat de textul de acțiune.

Să ne redăm pagina:

1611415628 945 O privire rapida asupra textului de actiune pentru Rails 60

Minunat!!

Acum avem un editor de text minunat pentru crearea articolului nostru.

Înainte de a începe să ne jucăm cu editorul, să implementăm rapid spectacol funcționalitatea blogului, astfel încât să putem vedea articolele pe care le-am creat.

În app / controllers / articles_controller.rb adăugați următoarea funcție:

 def show   @article = Article.find(params[:id]) end

De asemenea, trebuie să creăm o vizualizare pentru aceasta.

Creați fișierul app / views / articles / show.html.erb și adăugați următorul cod:

<p>Article Title:<strong><%= @article.title %></strong></p><p>Article Text:<strong><%= @article.text %></strong></p>
<%= link_to ‘Create new’,new_article_path %>

Asta e. Aplicația noastră este gata. Acum să verificăm diferitele caracteristici disponibile în editorul de text furnizat de ActionText.

1611415629 322 O privire rapida asupra textului de actiune pentru Rails 60

Putem vedea că ActionText oferă aproape toate funcționalitățile unui editor de text bogat normal, cum ar fi formatarea textului cu caractere aldine, cursive, adăugarea de greșeli, ghilimele, linkuri, glisarea și plasarea imaginilor etc.

După ce am salvat acest lucru, putem vedea postarea salvată din pagina de prezentare.

1611415629 536 O privire rapida asupra textului de actiune pentru Rails 60

Grozav!

Acesta este un exemplu foarte mic care afișează potențialul ActionText. Sper că a fost de ajutor. Încercați.

Marea majoritate a aplicațiilor web se ocupă într-un fel de conținut bogat. Deci, cred că această nouă caracteristică a Rails poate ușura viața multor dezvoltatori.

Mulțumiri către DHH și către toți oamenii minunați din spatele acestui lucru.

https://github.com/amkurian/Rails-6.0_action_text_demo

Câteva legături utile:

Prezentare generală a textului acțiunii – Ghiduri Ruby on Rails
Prezentare generală a textului de acțiune Acest ghid vă oferă tot ce aveți nevoie pentru a începe să gestionați conținutul cu text îmbogățit. După …edgeguides.rubyonrails.org