Ein kurzer Blick auf den Aktionstext für Rails 6.0

Rails 6.0 ist fast da. Die stabile Version wird am 30. April veröffentlicht. Die Rails 6.0 Beta1 wurde am 15. Januar veröffentlicht. Wie immer bei Rails, ist Rails 6.0 auch voller Action. Es gibt zwei neue Frameworks, Action Mailbox und Action Text. In diesem Beitrag werfen wir einen kurzen Blick auf Aktionstext, indem wir ihn in einer kleinen App verwenden.

Aktionstext

Mit Aktionstext können wir Rich-Text-Inhalte und -Bearbeitungen auf Rails übertragen. Dies bedeutet, dass wir Vorgänge wie das Formatieren von Text, das Einbetten von Bildern, das Formatieren von Links, das Hinzufügen von Listen und andere Editor-ähnliche Funktionen zu einem Textfeld ausführen können.

Dazu wird der Trix-Editor in das Framework aufgenommen. Der vom Trix-Editor generierte RichText-Inhalt wird in einem eigenen RichText-Modell gespeichert, das jedem in der Anwendung vorhandenen Active Record-Modell zugeordnet ist. Alle eingebetteten Bilder oder anderen Anhänge werden automatisch mit Active Storage gespeichert.

Beginnen wir mit der Erstellung unserer Rails-App, die eine Blogger-App sein wird. Die App wurde in Rails 6.0 erstellt, daher muss die Ruby-Version> 2.5 sein.

Im Terminaltyp

rails new blog --edge

Die - Kantenflagge ruft die neueste Schienenversion oder Kantenversion der Schienen ab.

Aktionstext erwartet, dass Web Packer und ActiveStorage installiert werden. Der aktive Speicher ist bereits in der Rails-App vorhanden. Also brauchen wir

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

in der Edelsteindatei.

Jetzt renn

bundle install.

Als nächstes müssen wir eine config / webpacker.yml erstellen:

bundle exec rails webpacker:install

Starten wir nun unseren Rails Server.

Großartig, lassen Sie uns schnell unsere App erstellen. Die App wird nur einen Modellartikel haben.

Lassen Sie uns einen Controller für Artikel erstellen:

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

Und dann konfigurieren Sie unsere Routen:

Rails.application.routes.draw do resources :articlesend

Als nächstes müssen wir unser Modell erstellen. Unser Artikelmodell besteht aus zwei Feldern: Titel und Text . Text muss das Feld sein, das das Rich-Text-Format akzeptiert. Bei der Migration müssen wir also nur das Titelfeld hinzufügen. Das Textfeld wird von ActionText behandelt.

Lassen Sie uns das Modell generieren

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

und führen Sie die Migrationen aus:

rails db:migrate

Fügen wir nun den ActionText-Teil hinzu. Für diesen ersten Lauf

rails action_text:install

Dadurch werden alle für Aktionstext erforderlichen Abhängigkeiten hinzugefügt. Dies fügt vor allem eine neue Datei javascript / packs / application.js und zwei Action-Storage-Migrationen hinzu.

Führen Sie die Migrationen erneut mit aus

rails db:migrate

Jetzt können wir den Textteil unseres Modells hinzufügen. Gehen Sie zu app / models / article.rb und fügen Sie die folgende Zeile hinzu

has_rich_text :text

Text ist der Feldname, den wir bereitstellen. Es kann alles wie Körper oder Inhalt usw. sein.

Jetzt wird unser Modell

class Article < ApplicationRecord has_rich_text :textend

Bevor wir unser Formular erstellen, erstellen wir unsere Controller-Logik für die Erstellung von Artikeln:

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

Wir können jetzt das Formular für den Blog erstellen. Fügen Sie in app / views / articles / new.rb den folgenden Formularcode hinzu:

Beachten Sie, dass wir für Textfelder form.rich_text_area verwenden, diewird durch Aktionstext bereitgestellt.

Lassen Sie uns unsere Seite rendern:

Genial!!

Wir haben jetzt einen großartigen Texteditor zum Erstellen unseres Artikels.

Bevor wir mit dem Editor spielen, implementieren wir schnell die Show- Funktionalität des Blogs, damit wir die von uns erstellten Artikel sehen können.

Fügen Sie in app / controller / articles_controller.rb die folgende Funktion hinzu:

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

Außerdem müssen wir dafür eine Ansicht erstellen.

Erstellen Sie die Datei app / views / articles / show.html.erb und fügen Sie den folgenden Code hinzu:

Article Title:

Article Text:

Das ist es. Unsere App ist fertig. Lassen Sie uns nun die verschiedenen Funktionen überprüfen, die im von ActionText bereitgestellten Texteditor verfügbar sind.

Wir können sehen, dass ActionText fast alle Funktionen eines normalen Rich-Text-Editors bietet, z. B. das Formatieren des Texts in Fettdruck, Kursivschrift, Hinzufügen von Durchstreichungen, Anführungszeichen, Links, Ziehen und Ablegen von Bildern usw.

Nachdem wir dies gespeichert haben, können wir den gespeicherten Beitrag auf der Show-Seite sehen.

Toll!

Dies ist ein sehr kleines Beispiel, das das Potenzial von ActionText zeigt. Hoffe es war hilfreich. Probieren Sie es aus.

Die überwiegende Mehrheit der Web-Apps befasst sich in irgendeiner Weise mit umfangreichen Inhalten. Daher glaube ich, dass diese neue Funktion von Rails vielen Entwicklern das Leben erleichtern kann.

Ein großes Lob an DHH und all die großartigen Leute, die dahinter stehen.

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

Einige nützliche Links:

Übersicht über den Aktionstext - Ruby on Rails-Hilfslinien

Übersicht über AktionstexteDieses Handbuch bietet Ihnen alles, was Sie für den Umgang mit Rich-Text- Inhalten benötigen. Nach edgeguides.rubyonrails.org