Een snelle blik op actietekst voor rails 6.0

Rails 6.0 is bijna hier. De stabiele versie wordt op 30 april uitgebracht. De Rails 6.0 beta1 werd op 15 januari uitgebracht. Zoals Rails releases altijd zijn, zit Rails 6.0 ook boordevol actie. Er zijn twee belangrijke nieuwe frameworks geïntroduceerd: Action Mailbox en Action Text. Laten we in dit bericht een korte blik werpen op Actietekst door deze in een kleine app te gebruiken.

Actietekst

Met Action Text kunnen we rich-text-inhoud en bewerkingen naar Rails brengen. Dit betekent dat we bewerkingen kunnen uitvoeren zoals het opmaken van tekst, het insluiten van afbeeldingen, het opmaken van links, het toevoegen van lijsten en andere editor-achtige functies aan een tekstveld.

Dit doet u door de Trix-editor in het framework op te nemen. De RichText-inhoud die door de Trix-editor wordt gegenereerd, wordt opgeslagen in zijn eigen RichText-model dat is gekoppeld aan een bestaand Active Record-model in de applicatie. Alle ingesloten afbeeldingen of andere bijlagen worden automatisch opgeslagen met Active Storage.

Laten we beginnen met het bouwen van onze Rails-app die een blogger-app zal zijn. De app is gemaakt in Rails 6.0, dus de ruby-versie moet> 2.5 zijn.

In het terminaltype

rails new blog --edge

De - randvlag haalt de laatste railversie of randversie van de rails op.

Action Text verwacht dat webpacker en ActiveStorage worden geïnstalleerd. De actieve opslag is al aanwezig in de Rails-app. Dus we hebben nodig

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

in het gem-bestand.

Ren nu

bundle install.

Vervolgens moeten we een config / webpacker.yml maken:

bundle exec rails webpacker:install

Laten we nu onze Rails Server starten.

Geweldig, laten we snel onze app bouwen. De app heeft slechts één modelartikel.

Laten we een controller voor artikelen maken:

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

En configureer vervolgens onze routes:

Rails.application.routes.draw do resources :articlesend

Vervolgens moeten we ons model maken. Ons artikelmodel heeft twee velden: dit zijn titel en tekst . tekst moet het veld zijn dat Rich Text Format accepteert. Dus bij de migratie hoeven we alleen het titelveld toe te voegen. Het tekstveld wordt afgehandeld door ActionText.

Laten we het model genereren

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

en voer de migraties uit:

rails db:migrate

Laten we nu het ActionText-gedeelte toevoegen. Voor die eerste run

rails action_text:install

Hiermee worden alle afhankelijkheden toegevoegd die vereist zijn voor Actietekst. Met name zal dit een nieuw bestand javascript / packs / application.js en twee actie-opslagmigraties toevoegen.

Voer de migraties opnieuw uit met

rails db:migrate

Nu kunnen we het tekstgedeelte van ons model toevoegen. Ga naar app / models / article.rb en voeg de volgende regel toe

has_rich_text :text

tekst is de veldnaam die we verstrekken. Het kan van alles zijn zoals body of inhoud enz.

Nu wordt ons model

class Article < ApplicationRecord has_rich_text :textend

Voordat we ons formulier bouwen, maken we onze controllerlogica voor het maken van artikelen:

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

We kunnen nu het formulier voor de blog maken. Voeg in app / views / Articles / new.rb de volgende formuliercode toe:

Merk op dat we voor tekstveld form.rich_text_area gebruiken diewordt geleverd door Action Text.

Laten we onze pagina weergeven:

Geweldig!!

We hebben nu een geweldige teksteditor om ons artikel te maken.

Voordat we met de editor gaan spelen, moeten we snel de showfunctionaliteit van de blog implementeren , zodat we de artikelen kunnen zien die we hebben gemaakt.

Voeg in app / controllers / Articles_controller.rb de volgende functie toe:

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

Hiervoor moeten we ook een weergave maken.

Maak het bestand app / views / artikelen / show.html.erb en voeg de volgende code toe:

Article Title:

Article Text:

Dat is het. Onze app is klaar. Laten we nu eens kijken naar de verschillende functies die beschikbaar zijn in de teksteditor van ActionText.

We kunnen zien dat ActionText bijna alle functionaliteiten biedt van een normale rich text-editor, zoals het opmaken van de tekst als vet, cursief, doorhalen, aanhalingstekens, links, slepen en neerzetten van afbeeldingen, etc.

Nadat we dit hebben opgeslagen, kunnen we het opgeslagen bericht vanaf de showpagina zien.

Super goed!

Dit is een heel klein voorbeeld dat het potentieel van ActionText laat zien. Ik hoop dat het nuttig was. Probeer het eens.

De overgrote meerderheid van web-apps heeft op de een of andere manier te maken met rijke inhoud. Dus ik geloof dat deze nieuwe functie van Rails het leven van veel ontwikkelaars gemakkelijker kan maken.

Een pluim voor DHH en alle geweldige mensen hierachter.

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

Enkele handige links:

Actietekstoverzicht - Ruby on Rails-gidsen

Overzicht actietekst Deze gids biedt u alles wat u nodig hebt om aan de slag te gaan met het verwerken van rich text-inhoud. Na edgeguides.rubyonrails.org