Μια γρήγορη ματιά στο κείμενο δράσης για ράγες 6.0

Το Rails 6.0 είναι σχεδόν εδώ. Η σταθερή έκδοση θα κυκλοφορήσει στις 30 Απριλίου. Το Rails 6.0 beta1 κυκλοφόρησε στις 15 Ιανουαρίου. Όπως πάντα οι κυκλοφορίες Rails, το Rails 6.0 είναι επίσης γεμάτο δράση. Υπάρχουν δύο βασικά πλαίσια που εισήχθησαν πρόσφατα, το Action Mailbox και το Action Text. Σε αυτήν την ανάρτηση, ας ρίξουμε μια γρήγορη ματιά στο Action Text χρησιμοποιώντας το σε μια μικρή εφαρμογή.

Κείμενο δράσης

Το Action Text μας επιτρέπει να φέρουμε πλούσιο περιεχόμενο κειμένου και επεξεργασία στο Rails. Αυτό σημαίνει ότι μπορούμε να εκτελέσουμε λειτουργίες όπως μορφοποίηση κειμένου, ενσωμάτωση εικόνων, μορφοποίηση συνδέσμων, προσθήκη λιστών και άλλης δυνατότητας επεξεργασίας σε πεδίο κειμένου.

Αυτό γίνεται συμπεριλαμβάνοντας τον επεξεργαστή Trix στο πλαίσιο. Το περιεχόμενο RichText που δημιουργείται από το πρόγραμμα επεξεργασίας Trix αποθηκεύεται στο δικό του μοντέλο RichText που σχετίζεται με οποιοδήποτε υπάρχον μοντέλο Active Record στην εφαρμογή. Όλες οι ενσωματωμένες εικόνες ή άλλα συνημμένα αποθηκεύονται αυτόματα χρησιμοποιώντας το Active Storage.

Ας αρχίσουμε να χτίζουμε την εφαρμογή Rails που θα είναι μια εφαρμογή blogger. Η εφαρμογή δημιουργήθηκε στο Rails 6.0, οπότε η έκδοση ρουμπίνι πρέπει να είναι> 2.5.

Στον τερματικό τύπο

rails new blog --edge

Η σημαία - edge φέρει την πιο πρόσφατη έκδοση ράγες ή την έκδοση άκρων των σιδηροτροχιών.

Το Action Text αναμένει την εγκατάσταση του web packer και του ActiveStorage. Ο ενεργός χώρος αποθήκευσης υπάρχει ήδη στην εφαρμογή Rails. Έτσι χρειαζόμαστε

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

στο αρχείο πολύτιμων λίθων.

Τρέξτε τώρα

bundle install.

Στη συνέχεια, πρέπει να δημιουργήσουμε ένα config / webpacker.yml:

bundle exec rails webpacker:install

Τώρα ας ξεκινήσουμε τον διακομιστή Rails.

Τέλεια, ας φτιάξουμε γρήγορα την εφαρμογή μας. Η εφαρμογή θα έχει μόνο ένα μοντέλο άρθρου.

Ας δημιουργήσουμε έναν ελεγκτή για άρθρα:

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

Και στη συνέχεια διαμορφώστε τις διαδρομές μας:

Rails.application.routes.draw do resources :articlesend

Στη συνέχεια, πρέπει να δημιουργήσουμε το μοντέλο μας. Το μοντέλο των άρθρων μας θα έχει δύο πεδία: είναι τίτλος και κείμενο . Το κείμενο πρέπει να είναι το πεδίο που δέχεται τη μορφή εμπλουτισμένου κειμένου. Έτσι, στη μετεγκατάσταση, πρέπει να προσθέσουμε μόνο το πεδίο τίτλου. Το πεδίο κειμένου θα χειριστεί το ActionText.

Ας δημιουργήσουμε το μοντέλο

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

και εκτελέστε τις μετακινήσεις:

rails db:migrate

Τώρα ας προσθέσουμε το τμήμα ActionText. Για αυτό το πρώτο τρέξιμο

rails action_text:install

Αυτό θα προσθέσει όλες τις εξαρτήσεις που απαιτούνται από το Action Text. Πιο συγκεκριμένα, αυτό θα προσθέσει ένα νέο αρχείο javascript / packs / application.js και δύο μετεγκαταστάσεις αποθήκευσης δράσης.

Εκτελέστε ξανά τις μετεγκαταστάσεις χρησιμοποιώντας

rails db:migrate

Τώρα μπορούμε να προσθέσουμε το τμήμα κειμένου του μοντέλου μας. Μεταβείτε στην εφαρμογή / models / article.rb και προσθέστε την ακόλουθη γραμμή

has_rich_text :text

Το κείμενο είναι το όνομα πεδίου που παρέχουμε. Μπορεί να είναι οτιδήποτε όπως το σώμα ή το περιεχόμενο κ.λπ.

Τώρα το μοντέλο μας γίνεται

class Article < ApplicationRecord has_rich_text :textend

Πριν δημιουργήσουμε τη φόρμα μας, ας δημιουργήσουμε τη λογική του ελεγκτή μας για τη δημιουργία άρθρων:

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

Μπορούμε τώρα να δημιουργήσουμε τη φόρμα για το ιστολόγιο. Στην εφαρμογή / προβολές / άρθρα / new.rb προσθέστε τον ακόλουθο κωδικό φόρμας:

Παρατηρήστε ότι για το πεδίο κειμένου χρησιμοποιούμε το form.rich_text_area το οποίοπαρέχεται από το κείμενο δράσης.

Ας δώσουμε τη σελίδα μας:

Φοβερός!!

Έχουμε τώρα ένα φοβερό πρόγραμμα επεξεργασίας κειμένου για τη δημιουργία του άρθρου μας.

Πριν ξεκινήσετε να παίζετε με τον επεξεργαστή, ας εφαρμόσει γρήγορα την παράσταση λειτουργικότητα του blog, έτσι ώστε να μπορούμε να δούμε τα άρθρα που έχουμε δημιουργήσει.

Στην εφαρμογή / ελεγκτές / άρθρα_controller.rb προσθέστε την ακόλουθη λειτουργία:

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

Επίσης, πρέπει να δημιουργήσουμε μια άποψη για αυτό.

Δημιουργήστε το αρχείο app / views / άρθρα / show.html.erb και προσθέστε τον ακόλουθο κώδικα:

Article Title:

Article Text:

Αυτό είναι. Η εφαρμογή μας ολοκληρώθηκε. Τώρα ας δούμε τις διάφορες δυνατότητες που είναι διαθέσιμες στο πρόγραμμα επεξεργασίας κειμένου που παρέχεται από το ActionText.

Μπορούμε να δούμε ότι το ActionText παρέχει σχεδόν όλες τις λειτουργίες ενός κανονικού πλούσιου επεξεργαστή κειμένου όπως τη μορφοποίηση του κειμένου ως τολμηρή, πλάγια, προσθήκη απεργιών, εισαγωγικών, συνδέσμων, μεταφοράς και απόθεσης εικόνων κ.λπ.

Μετά την αποθήκευση αυτού, μπορούμε να δούμε την αποθηκευμένη ανάρτηση από τη σελίδα εμφάνισης

Μεγάλος!

Αυτό είναι ένα πολύ μικρό παράδειγμα που εμφανίζει τις δυνατότητες του ActionText. Ελπίζω να ήταν χρήσιμο. Δοκίμασέ το.

Η μεγάλη πλειονότητα των εφαρμογών ιστού ασχολείται με πλούσιο περιεχόμενο με κάποιο τρόπο. Πιστεύω λοιπόν ότι αυτό το νέο χαρακτηριστικό του Rails μπορεί να κάνει τη ζωή πολλών προγραμματιστών ευκολότερη.

Kudos to DHH και όλοι οι φοβεροί άνθρωποι πίσω από αυτό.

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

Μερικοί Χρήσιμοι Σύνδεσμοι:

Επισκόπηση κειμένου δράσης - Οδηγοί Ruby on Rails

Επισκόπηση κειμένου δράσης Αυτός ο οδηγός σάς παρέχει όλα όσα χρειάζεστε για να ξεκινήσετε να χειρίζεστε περιεχόμενο εμπλουτισμένου κειμένου. Μετά edgeguides.rubyonrails.org