Использование ActionText с Trix (WYSIWYG) в Rails

В мире веб-разработки создание удобного и интуитивно понятного интерфейса для редактирования текста является важной задачей. Ruby on Rails предлагает мощный инструмент для этой цели — ActionText, который в сочетании с Trix, WYSIWYG-редактором, позволяет разработчикам легко интегрировать функциональность редактирования текста в свои приложения. В этой статье мы подробно рассмотрим, как использовать ActionText с Trix в Rails, а также предоставим примеры кода и полезные советы.

Что такое ActionText?

ActionText — это компонент Rails, который позволяет разработчикам добавлять функциональность редактирования текста в свои приложения. Он поддерживает форматирование текста, вставку изображений и других медиафайлов, а также хранит данные в базе данных с использованием ActiveRecord. ActionText использует Trix как свой WYSIWYG-редактор, что делает его мощным инструментом для создания контента.

Установка ActionText в вашем приложении Rails

Чтобы начать использовать ActionText, вам нужно установить его в вашем приложении Rails. Для этого выполните следующие шаги:

# Откройте ваш Gemfile и добавьте следующую строку:
gem 'actiontext'

# Затем выполните команду:
bundle install

# После этого выполните генерацию необходимых файлов:
rails action_text:install

# И не забудьте выполнить миграции:
rails db:migrate

После выполнения этих шагов ActionText будет установлен и готов к использованию в вашем приложении.

Настройка Trix

Trix — это WYSIWYG-редактор, который предоставляет пользователям возможность редактировать текст с помощью интуитивно понятного интерфейса. Он уже интегрирован с ActionText, но вам нужно убедиться, что он правильно настроен в вашем приложении.

Для начала добавьте Trix в ваш проект. В вашем application.js файле добавьте следующую строку:

import "trix"
import "@rails/actiontext"

Затем добавьте стили Trix в ваш application.css файл:

@import "trix";

Создание модели с ActionText

Теперь, когда ActionText и Trix установлены, давайте создадим модель, которая будет использовать ActionText для хранения текстового контента. Например, мы можем создать модель Article.

rails generate model Article title:string body:text

После этого откройте сгенерированный файл миграции и добавьте поле для ActionText:

class CreateArticles < ActiveRecord::Migration[6.0]
  def change
    create_table :articles do |t|
      t.string :title
      t.text :body

      t.timestamps
    end
  end
end

Теперь добавьте поддержку ActionText в вашу модель Article:

class Article < ApplicationRecord
  has_rich_text :body
end

Создание формы для редактирования

Теперь, когда у нас есть модель, давайте создадим форму для создания и редактирования статей. В вашем представлении articles/_form.html.erb добавьте следующий код:

<%= form_with(model: article, local: true) do |form| %>
  <% if article.errors.any? %>
    
      <%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:

      
        <% article.errors.full_messages.each do |message| %>
          <%= message %>
        <% end %>
      
    
  <% end %>

  
    <%= form.label :title %>
    <%= form.text_field :title %>
  

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

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

Этот код создаст форму, в которой пользователи смогут вводить заголовок и содержимое статьи с помощью редактора Trix.

Контроллер для обработки статей

Теперь давайте создадим контроллер для обработки статей. Выполните следующую команду:

rails generate controller Articles

В вашем контроллере articles_controller.rb добавьте следующие действия:

class ArticlesController < ApplicationController
  def new
    @article = Article.new
  end

  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to @article, notice: 'Article was successfully created.'
    else
      render :new
    end
  end

  private

  def article_params
    params.require(:article).permit(:title, :body)
  end
end

Отображение статей

Теперь давайте создадим представление для отображения статей. В вашем файле articles/show.html.erb добавьте следующий код:


  Title:
  <%= @article.title %>



  Body:
  <%= @article.body %>

Добавление маршрутов

Не забудьте добавить маршруты для статей в ваш файл config/routes.rb:

Rails.application.routes.draw do
  resources :articles
end

Тестирование приложения

Теперь, когда все настроено, вы можете запустить сервер и протестировать ваше приложение:

rails server

Перейдите по адресу http://localhost:3000/articles/new, чтобы создать новую статью. Вы должны увидеть форму с полем для заголовка и редактором Trix для содержимого.

Заключение

ActionText в сочетании с Trix предоставляет мощный и удобный инструмент для редактирования текста в приложениях на Rails. С его помощью вы можете легко создавать и редактировать контент, добавляя форматирование, изображения и другие медиафайлы. Мы рассмотрели основные шаги по установке и настройке ActionText и Trix, а также создание модели, формы и контроллера для работы с текстовым контентом.

Теперь вы готовы использовать ActionText и Trix в своих проектах на Rails. Удачи в разработке!