Använda ActionText med Trix (WYSIWYG) i Rails

Att bygga moderna webbapplikationer innebär ofta att hantera och presentera textinnehåll på ett användarvänligt sätt. En av de mest populära metoderna för att göra detta i Ruby on Rails är genom att använda ActionText tillsammans med Trix, en WYSIWYG-editor (What You See Is What You Get). I denna artikel kommer vi att gå igenom hur du kan integrera ActionText med Trix i din Rails-applikation, steg för steg.

Vad är ActionText?

ActionText är en del av Rails 6 och erbjuder en kraftfull lösning för att hantera rika textinnehåll. Det gör det möjligt att enkelt skapa, redigera och lagra text med formatering, bilder och andra media. ActionText använder sig av Trix som standard WYSIWYG-editor, vilket gör det enkelt att implementera och använda.

Vad är Trix?

Trix är en JavaScript-baserad WYSIWYG-editor som gör det möjligt för användare att skapa och redigera textinnehåll med en visuell gränssnitt. Den är lätt att använda och erbjuder funktioner som:

Textformatering (fet, kursiv, understruken)
Listor (punkt- och numrerade)
Infoga bilder och andra media
Stöd för drag-and-drop

Komma igång med ActionText och Trix

För att börja använda ActionText och Trix i din Rails-applikation, följ dessa steg:

Steg 1: Skapa en ny Rails-applikation

Om du inte redan har en Rails-applikation, kan du skapa en ny med följande kommando:

rails new myapp --skip-javascript

Vi använder flaggan --skip-javascript för att hantera JavaScript-filer manuellt senare.

Steg 2: Aktivera ActionText

För att aktivera ActionText i din applikation, kör följande kommando:

rails action_text:install

Detta kommando kommer att skapa nödvändiga migrationer och lägga till ActionText i din applikation.

Steg 3: Migrera databasen

Efter att ha installerat ActionText, kör migrationerna för att skapa de nödvändiga tabellerna i databasen:

rails db:migrate

Steg 4: Lägg till Trix i din applikation

För att använda Trix, måste vi lägga till det i vår applikation. Först, öppna din Gemfile och lägg till följande rad:

gem 'trix'

Efter att ha lagt till gemet, kör:

bundle install

Nu behöver vi inkludera Trix i vår JavaScript. Skapa en ny fil i app/javascript/packs och kalla den trix.js. Lägg till följande kod:

import "trix"
import "@rails/actiontext"

Glöm inte att inkludera trix.js i din application.js:

require("trix")
require("@rails/actiontext")

Steg 5: Skapa en modell med ActionText

Nu är det dags att skapa en modell som kommer att använda ActionText. Låt oss skapa en enkel Post-modell:

rails generate model Post title:string content:text

Efter att ha skapat modellen, lägg till ActionText-associationen i post.rb:

class Post < ApplicationRecord
  has_rich_text :content
end

Steg 6: Skapa en vy för att redigera inlägg

Nu behöver vi skapa en vy för att redigera våra inlägg. Skapa en ny vy i app/views/posts/_form.html.erb:

<%= form_with(model: post) do |form| %>
  
    <%= form.label :title %>
    <%= form.text_field :title %>
  

  
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  

  
    <%= form.submit %>
  
<% end %>

Steg 7: Skapa kontroller för inlägg

Nu behöver vi skapa en kontroller för att hantera våra inlägg. Skapa en ny kontroller med följande kommando:

rails generate controller Posts

Öppna posts_controller.rb och lägg till följande kod:

class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to @post
    else
      render :new
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

Steg 8: Skapa vyer för att visa inlägg

Skapa en vy för att visa inlägg i app/views/posts/show.html.erb:

<%= @post.title %>
<%= @post.content %>

Testa din applikation

Nu är allt klart! Du kan starta din Rails-server med:

rails server

Öppna din webbläsare och navigera till http://localhost:3000/posts/new för att skapa ett nytt inlägg. Du bör se Trix-editoren där du kan skriva och formatera ditt innehåll.

Avslutande tankar

Att använda ActionText med Trix i Rails är ett utmärkt sätt att hantera rika textinnehåll på ett användarvänligt sätt. Med bara några få steg kan du integrera dessa kraftfulla verktyg i din applikation och ge dina användare en fantastisk upplevelse. Oavsett om du bygger en blogg, ett forum eller en annan typ av applikation, kommer ActionText och Trix att hjälpa dig att skapa och hantera innehåll på ett effektivt sätt.

Lycka till med din utveckling i Rails, och ha kul med ActionText och Trix!