מבט מהיר על טקסט פעולה עבור מסילות 6.0

מסילות 6.0 כבר כמעט כאן. הגרסה היציבה תשוחרר ב -30 באפריל. The Rails 6.0 beta1 שוחרר ב- 15. בינואר, כפי שמשחררים תמיד של Rails, Rails 6.0 הוא גם מלא פעולה. ישנן שתי מסגרות עיקריות שהוצגו לאחרונה, Action Mailbox ו- Action Text. בפוסט זה, בואו נסתכל במהירות על טקסט הפעולה על ידי שימוש בו באפליקציה קטנה.

טקסט פעולה

Action Text מאפשר לנו להביא תוכן טקסט עשיר ועריכה ל- Rails. המשמעות היא שנוכל לבצע פעולות כמו עיצוב טקסט, הטמעת תמונות, עיצוב קישורים, הוספת רשימות ותכונות אחרות הדומות לעורך לשדה טקסט.

זה נעשה על ידי הכללת עורך טריקס במסגרת. תוכן RichText שנוצר על ידי עורך Trix נשמר במודל RichText משלו המשויך לכל מודל Record Record קיים ביישום. כל התמונות המוטבעות או קבצים מצורפים אחרים נשמרים אוטומטית באמצעות אחסון פעיל.

נתחיל בבניית אפליקציית Rails שלנו אשר תהיה אפליקציית בלוגר. האפליקציה נוצרת ב- Rails 6.0, לכן גרסת האודם חייבת להיות> 2.5.

בסוג המסוף

rails new blog --edge

דגל הקצה מביא את גרסת המסילה האחרונה או גרסת הקצה של המסילה.

טקסט פעולה מצפה להתקנת חבילת אינטרנט ו- ActiveStorage. האחסון הפעיל כבר קיים באפליקציית Rails. אז אנחנו צריכים

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

בתיק החן.

עכשיו רוץ

bundle install.

לאחר מכן עלינו ליצור config / webpacker.yml:

bundle exec rails webpacker:install

עכשיו בואו נתחיל את שרת המסילות שלנו.

נהדר, בואו לבנות במהירות את האפליקציה שלנו. לאפליקציה יהיה מאמר מודל אחד בלבד.

בואו ניצור בקר למאמרים:

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

זה יוסיף את כל התלות הנדרשת על ידי טקסט פעולה. בעיקר, זה יוסיף קובץ javascript / packs / application.js חדש ושתי הגירות אחסון פעולה.

הפעל את ההעברות שוב באמצעות

rails db:migrate

כעת אנו יכולים להוסיף את חלק הטקסט של המודל שלנו. עבור אל app / 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 אשרמסופק על ידי Action Text.

תן לנו לעבד את הדף שלנו:

מדהים!!

כעת יש לנו עורך טקסט מדהים ליצירת המאמר שלנו.

לפני שנתחיל לשחק עם העורך, בואו נשתמש במהירות בפונקציונליות ההצגה של הבלוג, כדי שנוכל לראות את המאמרים שיצרנו.

בשנת אפליקציה / בקרים / articles_controller.rb להוסיף את הפונקציה הבאה:

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

כמו כן, עלינו ליצור מבט לכך.

צור את אפליקציית הקובץ / תצוגות / מאמרים / show.html.erb והוסף את הקוד הבא:

Article Title:

Article Text:

זהו זה. האפליקציה שלנו סיימה. כעת נבדוק את התכונות השונות הקיימות בעורך הטקסט המסופק על ידי ActionText.

אנו יכולים לראות ש- ActionText מספק כמעט את כל הפונקציות של עורך טקסט עשיר רגיל כמו עיצוב הטקסט כמודגש, נטוי, הוספת דרכי דרך, מרכאות, קישורים, גרירת ושחרור תמונות וכו '.

לאחר שמירת זה, אנו יכולים לראות את הפוסט השמור מדף התוכנית.

גדול!

זו דוגמה קטנה מאוד המציגה את הפוטנציאל של ActionText. מקווה שזה היה מועיל. תנסה.

רוב מוחלט של אפליקציות האינטרנט עוסקות בתוכן עשיר בצורה כלשהי. לכן אני מאמין שתכונה חדשה זו של Rails יכולה להקל על חייהם של מפתחים רבים.

כל הכבוד ל- DHH ולכל האנשים המדהימים שעומדים מאחורי זה.

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

כמה קישורים שימושיים:

סקירת טקסט פעולה - מדריכי Ruby on Rails

סקירה על טקסט פעולה מדריך זה מספק לך את כל מה שאתה צריך בכדי להתחיל בעבודה עם תוכן טקסט עשיר. לאחר ... edgeguides.rubyonrails.org