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

Rails 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, Action Mailbox și Action Text. În această postare, să aruncăm o privire rapidă asupra textului de acțiune folosindu-l într-o aplicație mică.

Textul acțiunii

Textul de acțiune ne permite să aducem conținut text bogat și editare în 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 editorului 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 Active Storage.

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

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ți

bundle install.

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

bundle exec rails webpacker:install

Acum să ne pornim serverul Rails.

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 titlul și textul . 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 nou fișier javascript / packs / application.js și două migrări de stocare acțiune.

Rulați din nou migrările folosind

rails db:migrate

Acum putem adăuga partea de text a modelului nostru. Accesați 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 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:

Observați că pentru câmpul de text folosim form.rich_text_area careeste furnizat de textul de acțiune.

Să ne redăm pagina:

Minunat!!

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

Înainte de a începe să joace cu editorul, să pună în aplicare rapid arăta funcționalitatea blog - ul, 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:

Article Title:

Article Text:

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

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.

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.

//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