Trix Editor anpassen

Der Trix-editor ist der standard Editor für Ruby on Rails mit der ActionText Erweiterung.
ActionText wird mit folgendem Kommando installiert:

1. ActionText Installation

$ bin/rails action_text:install

Es führt Folgendes aus:

Installiert die JavaScript-Pakete für trix und @rails/actiontext und fügt diese zur Datei application.js hinzu.
Fügt das Gem image_processing für die Analyse und Bearbeitung der eingebetteten Bilder und anderer Anhänge mit Active Storage hinzu.
Weitere Informationen hierzu im Leitfaden: Active Storage – Überblick.
Fügt Migrationen hinzu, um die folgenden Tabellen zu erstellen, in denen Rich-Text-Inhalte und Anhänge gespeichert werden: action_text_rich_texts, active_storage_blobs, active_storage_attachments, active_storage_variant_records.
Erstellt die Datei actiontext.css, die alle Trix-Stile und Überschreibungen enthält.
Fügt die Standard-View-Partials _content.html und _blob.html hinzu, um Action-Text-Inhalte bzw. Active-Storage-Anhänge (auch bekannt als Blobs) darzustellen.

Anschließend werden durch die Ausführung der Migrationen die neuen Tabellen action_text_* und active_storage_* zu der App hinzugefügt:

$ bin/rails db:migrate

Wenn die Action-Text-Installation die Tabelle action_text_rich_texts anlegt, verwendet diese eine polymorphe Beziehung, damit mehrere Modelle Rich-Text-Attribute hinzufügen können. Dies geschieht über die Spalten record_type und record_id, in denen jeweils der ClassName des Modells und die ID des Datensatzes gespeichert werden.

Bei polymorphen Assoziationen kann ein Modell über eine einzige Assoziation zu mehr als einem anderen Modell gehören.
Weitere Informationen hierzu kann im Leitfaden zu Active-Record-Assoziationen nachgelesen werden.

2. Erstellen von Rich-Text-Inhalten

Der RichText-Datensatz enthält den vom Trix-Editor erzeugten Inhalt in einem serialisierten Body-Attribut. Diese enthält außerdem alle Verweise auf die eingebetteten Dateien, die mithilfe von Active Storage gespeichert werden. Der Datensatz wird dann mit dem Active-Record-Modell verknüpft, das Rich-Text-Inhalte enthalten soll.
Die Verknüpfung erfolgt durch Einfügen der Klassenmethode has_rich_text in das Modell, dem Rich Text hinzugefügt werrden soll.

# app/models/article.rb
class Article < ApplicationRecord
  has_rich_text :body
end

Es ist nicht notwendig, die Spalte body zu der Article-Tabelle hinzuzufügen. has_rich_text verknüpft den Inhalt mit der erstellten Tabelle action_text_rich_texts und verbindet ihn wieder mit Ihrem Modell. Das Attribut kann auch anders als body benannt werden.

Sobald Sie die Klassenmethode has_rich_text zum Modell hinzugefügt wurde, kann die Ansicht angepasst werden, um den Rich-Text-Editor (Trix) für dieses Feld zu nutzen.
Verwendet wird dazu ein "rich_textarea" Element für das Formularfeld.

<%# app/views/articles/_form.html.erb %>
<%= form_with model: article do |form| %>
  <div class="field">
    <%= form.label :body %>
    <%= form.rich_textarea :body %>
  </div>
<% end %>

Dadurch wird ein Trix-Editor angezeigt, mit dem der Rich-Text entsprechend erstellt und aktualisiert werden kann.

Um sicherzustellen, dass die Aktualisierungen aus dem Editor übernommen werden können, muss schließlich das "referenzierende" Attribut als Parameter im entsprechenden Controller zugelassen werden:

def article_params
  params.expect(article: [
    :header,
    :header_type,
    :sorting,
    :published_at,
    :hidden,
    :body # das neue, zusätzliche body Attribute
   ])
  end
end

Die Verwendung der Parameter im Controller sieht dann in etwa so aus:

Action Create:

# POST /articles
# POST /articles.json
def create
  @admin_article = Article.new(article_params)
  respond_to do |format|
    if @admin_article.save
      format.html { redirect_to @admin_article, success: t(:object_created_successfully, object_name: Article.model_name.human) }
      format.json { render :show, status: :created, location: @admin_article }
    else
      format.html { render :new, status: :unprocessable_content }
      format.json { render json: @admin_article.errors, status: :unprocessable_entity }
    end
  end
end

Action Update:

# PATCH/PUT /articles/1
# PATCH/PUT /articles/1.json
def update
  respond_to do |format|
    if @admin_article.update(article_params)
      format.html { redirect_to @admin_article, success: t(:object_updated_successfully, object_name: Article.model_name.human) }
      format.json { render :show, status: :ok, location: @admin_article}
    else
      format.html { render :edit, status: :unprocessable_content }
      format.json { render json: @admin_article.errors, status: :unprocessable_entity }
    end
  end
end

Trix Editor anpassen

Subpages Menu