ActionText mit Trix in Rails verwenden

In der heutigen Webentwicklung ist es wichtig, dass Benutzer Inhalte einfach und intuitiv erstellen können. Eine der besten Möglichkeiten, dies zu erreichen, ist die Verwendung von WYSIWYG-Editoren (What You See Is What You Get). In der Ruby on Rails-Welt ist Trix ein beliebter WYSIWYG-Editor, der nahtlos mit ActionText integriert werden kann. In diesem Artikel werden wir uns ansehen, wie man ActionText mit Trix in einer Rails-Anwendung einrichtet und verwendet.

Was ist ActionText?

ActionText ist ein Teil des Ruby on Rails-Frameworks, das es Entwicklern ermöglicht, reichhaltige Textinhalte zu erstellen und zu verwalten. Es bietet Funktionen wie die Unterstützung von Bildern, Videos und anderen Medien, die in Textinhalte eingebettet werden können. ActionText verwendet das Trix-Editor-Frontend, um eine benutzerfreundliche Oberfläche für die Inhaltserstellung bereitzustellen.

Was ist Trix?

Trix ist ein WYSIWYG-Editor, der von Basecamp entwickelt wurde. Er ist leichtgewichtig, einfach zu bedienen und bietet eine Vielzahl von Funktionen, die es Benutzern ermöglichen, Texte zu formatieren, Links hinzuzufügen und Bilder hochzuladen. Trix ist die Standardoberfläche für ActionText und bietet eine hervorragende Benutzererfahrung.

Einrichten von ActionText und Trix in Rails

Um ActionText und Trix in deiner Rails-Anwendung zu verwenden, musst du einige Schritte befolgen. Lass uns diese Schritte im Detail durchgehen.

1. Rails-Anwendung erstellen

Falls du noch keine Rails-Anwendung hast, kannst du eine neue erstellen, indem du den folgenden Befehl in deinem Terminal ausführst:

rails new myapp --skip-javascript

Der Parameter --skip-javascript wird verwendet, um die Standard-JavaScript-Integration zu überspringen, da wir Trix verwenden werden.

2. ActionText installieren

Um ActionText zu installieren, musst du die folgenden Schritte ausführen:

Füge die ActionText-Gem zu deiner Gemfile hinzu:

gem 'actiontext'

Führe den Bundle-Befehl aus, um die Gem zu installieren:

bundle install

Führe den Installationsbefehl für ActionText aus:

rails action_text:install

Dieser Befehl erstellt die erforderlichen Migrationen und fügt die notwendigen Dateien hinzu.

3. Migration ausführen

Nachdem du ActionText installiert hast, musst du die Migrationen ausführen:

rails db:migrate

4. Trix in die Anwendung einfügen

Jetzt ist es an der Zeit, Trix in deine Anwendung zu integrieren. Du kannst Trix über das CDN einfügen oder es lokal installieren. Hier zeigen wir dir, wie du es über das CDN einfügst:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.js"></script>

Füge diese Zeilen in die app/views/layouts/application.html.erb Datei ein, um Trix in deiner Anwendung verfügbar zu machen.

5. Erstellen eines Modells mit ActionText

Jetzt, da Trix und ActionText eingerichtet sind, kannst du ein Modell erstellen, das ActionText verwendet. Lass uns ein einfaches Modell namens Post erstellen:

rails generate model Post title:string content:text

Öffne die generierte Migrationsdatei und füge die ActionText-Spalte hinzu:

class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :content

      t.timestamps
    end
  end
end

Führe die Migration erneut aus:

rails db:migrate

6. ActionText in das Post-Formular einfügen

Jetzt kannst du ActionText in dein Post-Formular einfügen. Öffne die Datei app/views/posts/_form.html.erb und füge den Trix-Editor hinzu:

<%= form_with(model: post, local: true) do |form| %>
  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<%= end %>

7. Anzeigen der Posts

Um die Posts anzuzeigen, kannst du die show- und index-Aktionen in deinem PostsController anpassen. Hier ist ein einfaches Beispiel für die show-Aktion:

def show
  @post = Post.find(params[:id])
end

Und in der app/views/posts/show.html.erb Datei kannst du den Inhalt so anzeigen:

<h1><%= @post.title %></h1>
<div><%= @post.content %></div>

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man ActionText mit Trix in einer Ruby on Rails-Anwendung einrichtet und verwendet. Wir haben die Schritte zur Installation, Migration und Integration des Trix-Editors in ein einfaches Post-Modell durchlaufen. ActionText und Trix bieten eine leistungsstarke Kombination, um Benutzern die Erstellung und Verwaltung von reichhaltigen Inhalten zu erleichtern.

Wenn du weitere Fragen hast oder mehr über ActionText und Trix erfahren möchtest, zögere nicht, die offizielle Dokumentation zu konsultieren oder in der Rails-Community nachzufragen. Viel Spaß beim Entwickeln!